Popovers

Twitter bootstrap Documentation

Example

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Click to toggle popover',
        'variant' => 'danger',
        'popover' => "And here's some amazing content. It's very engaging. Right?",
        'size' => 'lg',
    ],
    'attributes' => ['title' => 'Popover title'],
]);

Four directions

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Popover on top',
        'popover' => [
            'placement' => 'top',
            'content' => 'Top popover',
        ],
    ],
    'attributes' => ['title' => ''],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Popover on right',
        'popover' => [
            'placement' => 'right',
            'content' => 'Right popover',
        ],
    ],
    'attributes' => ['title' => ''],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Popover on bottom',
        'popover' => [
            'placement' => 'bottom',
            'content' => 'Bottom popover',
        ],
    ],
    'attributes' => ['title' => ''],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Popover on left',
        'popover' => [
            'placement' => 'left',
            'content' => 'Left popover',
        ],
    ],
    'attributes' => ['title' => ''],
]);

Dismiss on next click

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'name' => 'popover',
    'options' => [
        'tag' => 'a',
        'label' => 'Dismissible popover',
        'variant' => 'danger',
        'popover' => [
            'trigger' => 'focus',
            'content' => "And here's some amazing content. It's very engaging. Right?",
        ],
        'size' => 'lg',
    ],
    'attributes' => ['title' => 'Dismissible popover', 'tabindex' => '0'],
]);

Disabled elements

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Disabled button',
        'variant' => 'primary',
        'popover' => [
            'content' => 'Disabled popover',
            'trigger' => 'hover focus',
        ],
    ],
    'attributes' => ['disabled' => true],
]);