Class yii\bootstrap5\Popover

All Classes | Properties | Methods | Constants
Inheritanceyii\bootstrap5\Popover » yii\bootstrap5\Widget » yii\base\Widget
Uses Traitsyii\bootstrap5\BootstrapWidgetTrait
Source Code https://github.com/yiisoft/yii2-bootstrap5/blob/master/src/Popover.php

Popover renders a popover that can be toggled by clicking on a button.

The following example will show the content enclosed between the begin() and end() calls within the modal window:

Popover::begin([
    'title' => 'Hello world',
    'toggleButton' => ['label' => 'click me'],
]);

echo 'Say hello...';

Popover::end();

See also https://getbootstrap.com/docs/5.1/components/popovers/.

Public Properties

Hide inherited properties

Property Type Description Defined By
$arrowOptions array Arrow options yii\bootstrap5\Popover
$bodyOptions array Body options yii\bootstrap5\Popover
$clientEvents array The event handlers for the underlying Bootstrap JS plugin. yii\bootstrap5\BootstrapWidgetTrait
$clientOptions array|false The options for the underlying Bootstrap JS plugin/component. yii\bootstrap5\BootstrapWidgetTrait
$headerOptions array Additional header options yii\bootstrap5\Popover
$options array The HTML attributes for the widget container tag. yii\bootstrap5\Widget
$placement string How to position the popover - PLACEMENT_AUTO | PLACEMENT_TOP | PLACEMENT_BOTTOM | PLACEMENT_LEFT | PLACEMENT_RIGHT. yii\bootstrap5\Popover
$title string|null The tile content in the popover. yii\bootstrap5\Popover
$toggleButton array|false The options for rendering the toggle button tag. yii\bootstrap5\Popover

Public Methods

Hide inherited methods

Method Description Defined By
init() yii\bootstrap5\Popover
run() yii\bootstrap5\Popover

Protected Methods

Hide inherited methods

Method Description Defined By
initOptions() Initializes the widget options. yii\bootstrap5\Popover
registerClientEvents() Registers JS event handlers that are listed in $clientEvents. yii\bootstrap5\BootstrapWidgetTrait
registerPlugin() Registers a specific Bootstrap plugin/component and the related events. yii\bootstrap5\BootstrapWidgetTrait
renderArrow() Renders the arrow HTML markup of the popover yii\bootstrap5\Popover
renderBody() Renders the opening tag of the modal body. yii\bootstrap5\Popover
renderHeader() Renders the header HTML markup of the popover yii\bootstrap5\Popover
renderToggleButton() Renders the toggle button. yii\bootstrap5\Popover

Constants

Hide inherited constants

Constant Value Description Defined By
PLACEMENT_AUTO 'auto' yii\bootstrap5\Popover
PLACEMENT_BOTTOM 'bottom' yii\bootstrap5\Popover
PLACEMENT_LEFT 'left' yii\bootstrap5\Popover
PLACEMENT_RIGHT 'right' yii\bootstrap5\Popover
PLACEMENT_TOP 'top' yii\bootstrap5\Popover
TRIGGER_CLICK 'click' yii\bootstrap5\Popover
TRIGGER_FOCUS 'focus' yii\bootstrap5\Popover
TRIGGER_HOVER 'hover' yii\bootstrap5\Popover
TRIGGER_MANUAL 'manual' yii\bootstrap5\Popover

Property Details

Hide inherited properties

$arrowOptions public property

Arrow options

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $arrowOptions = []
$bodyOptions public property

Body options

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $bodyOptions = []
$headerOptions public property

Additional header options

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $headerOptions = []
$placement public property

How to position the popover - PLACEMENT_AUTO | PLACEMENT_TOP | PLACEMENT_BOTTOM | PLACEMENT_LEFT | PLACEMENT_RIGHT. When auto is specified, it will dynamically reorient the popover.

public string $placement = self::PLACEMENT_AUTO
$title public property

The tile content in the popover.

public string|null $title = null
$toggleButton public property

The options for rendering the toggle button tag. The toggle button is used to toggle the visibility of the popover. If this property is false, no toggle button will be rendered.

The following special options are supported:

  • tag: string, the tag name of the button. Defaults to 'button'.
  • label: string, the label of the button. Defaults to 'Show'.

The rest of the options will be rendered as the HTML attributes of the button tag. Please refer to the Popover plugin help for the supported HTML attributes.

public array|false $toggleButton = false

Method Details

Hide inherited methods

init() public method

public void init ( )

                public function init(): void
{
    parent::init();
    $this->initOptions();
    ob_start();
}
initOptions() protected method

Initializes the widget options.

This method sets the default values for various options.

protected void initOptions ( )

                protected function initOptions(): void
{
    $options = array_merge([
        'role' => 'tooltip',
    ], $this->options, [
        'id' => $this->options['id'] . '-popover',
    ]);
    Html::addCssClass($options, [
        'widget' => 'popover',
    ]);
    $template = Html::beginTag('div', $options);
    $template .= $this->renderArrow();
    $template .= $this->renderHeader();
    $template .= $this->renderBody();
    $template .= Html::endTag('div');
    $this->clientOptions = array_merge([
        'template' => $template,
        'placement' => $this->placement,
        'title' => $this->title,
        'sanitize' => false,
        'html' => true,
    ], $this->clientOptions);
    if ($this->toggleButton !== false) {
        $this->toggleButton = array_merge([
            'type' => 'button',
        ], $this->toggleButton);
    }
}
registerClientEvents() protected method

Defined in: yii\bootstrap5\BootstrapWidgetTrait::registerClientEvents()

Registers JS event handlers that are listed in $clientEvents.

protected void registerClientEvents ( ?string $name = null )
$name ?string 

                protected function registerClientEvents(?string $name = null): void
{
    if (!empty($this->clientEvents)) {
        $id = $this->options['id'];
        $js = [];
        $appendix = ($name === 'dropdown') ? '.parentElement' : '';
        foreach ($this->clientEvents as $event => $handler) {
            $js[] = "document.getElementById('$id')$appendix.addEventListener('$event', $handler);";
        }
        $this->getView()->registerJs(implode("\n", $js));
    }
}
registerPlugin() protected method

Defined in: yii\bootstrap5\BootstrapWidgetTrait::registerPlugin()

Registers a specific Bootstrap plugin/component and the related events.

protected void registerPlugin ( string $name )
$name string

The name of the Bootstrap plugin

 

                protected function registerPlugin(string $name): void
{
    /**
     * @see https://github.com/twbs/bootstrap/blob/v5.2.0/js/index.esm.js
     */
    $jsPlugins = [
        'alert',
        'button',
        'carousel',
        'collapse',
        'dropdown',
        'modal',
        'offcanvas',
        'popover',
        'scrollspy',
        'tab',
        'toast',
        'tooltip',
    ];
    if (in_array($name, $jsPlugins, true)) {
        $view = $this->getView();
        BootstrapPluginAsset::register($view);
        // 'popover', 'toast' and 'tooltip' plugins not activates via data attributes
        if ($this->clientOptions !== false || in_array($name, ['popover', 'toast', 'tooltip'], true)) {
            $name = ucfirst($name);
            $id = $this->options['id'];
            $options = empty($this->clientOptions) ? '{}' : Json::htmlEncode($this->clientOptions);
            $view->registerJs("(new bootstrap.$name('#$id', $options));");
        }
        $this->registerClientEvents($name);
    }
}
renderArrow() protected method

Renders the arrow HTML markup of the popover

protected string renderArrow ( )
return string

The rendering result

 

                protected function renderArrow(): string
{
    Html::addCssClass($this->arrowOptions, [
        'widget' => 'popover-arrow',
    ]);
    return Html::tag('div', '', $this->arrowOptions);
}
renderBody() protected method

Renders the opening tag of the modal body.

protected string renderBody ( )
return string

The rendering result

 

                protected function renderBody(): string
{
    Html::addCssClass($this->bodyOptions, [
        'widget' => 'popover-body',
    ]);
    return Html::tag('div', '', $this->bodyOptions);
}
renderHeader() protected method

Renders the header HTML markup of the popover

protected string renderHeader ( )
return string

The rendering result

 

                protected function renderHeader(): string
{
    Html::addCssClass($this->headerOptions, [
        'widget' => 'popover-header',
    ]);
    return Html::tag('h3', '', $this->headerOptions);
}
renderToggleButton() protected method

Renders the toggle button.

protected string|null renderToggleButton ( )
return string|null

The rendering result

 

                protected function renderToggleButton(): ?string
{
    if (($toggleButton = $this->toggleButton) !== false) {
        $tag = ArrayHelper::remove($toggleButton, 'tag', 'button');
        $label = ArrayHelper::remove($toggleButton, 'label', Yii::t('yii/bootstrap5', 'Show'));
        $toggleButton['id'] = $this->options['id'];
        return Html::tag($tag, $label, $toggleButton);
    } else {
        return null;
    }
}
run() public method

public ?string run ( )

                public function run(): ?string
{
    $content = ob_get_clean();
    if (!empty($content)) {
        $this->clientOptions['content'] = $content;
    }
    $html = $this->renderToggleButton();
    $this->registerPlugin('popover');
    return $html;
}