❮ Bootstrap Thumbnails Bootstrap V2 Less ❯

Bootstrap Popover Plugin

The Popover is similar to Tooltips; it provides an extended view. To activate the Popover, users simply need to hover the mouse over the element. The content of the Popover can be fully populated using the Bootstrap Data API. This method relies on the Tooltip.

If you want to reference this plugin individually, you need to reference popover.js, which depends on the Tooltip plugin. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can reference bootstrap.js or the compressed bootstrap.min.js.

Usage

The Popover plugin generates content and markup as needed, and by default places the popover behind the trigger element. You can add a popover in two ways:

Via data attributes: To add a popover, simply add data-toggle="popover" to an anchor/button tag. The anchor's title will be the text of the popover. By default, the plugin sets the popover at the top.
```
<a href="#" data-toggle="popover" title="Example popover">
    Hover over me
</a>
```
Via JavaScript: Enable popover via JavaScript:
```
$('#identifier').popover(options)
```

The Popover plugin is not like the previously discussed dropdowns and other plugins; it is not a pure CSS plugin. To use this plugin, you must activate it using jQuery (read JavaScript). Use the following script to enable all popovers on the page:

$(function () { $("[data-toggle='popover']").popover(); });

Example

The following example demonstrates the use of the Popover plugin via data attributes.

Example

<div class="container" style="padding: 100px 50px 10px;">
    <button type="button" class="btn btn-default" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="left"
            data-content="Some content inside the left popover">
        Left Popover
    </button>
    <button type="button" class="btn btn-primary" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="top"
            data-content="Some content inside the top popover">
        Top Popover
    </button>
    <button type="button" class="btn btn-success" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="bottom"
            data-content="Some content inside the bottom popover">
        Bottom Popover
    </button>
    <button type="button" class="btn btn-warning" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="right"
            data-content="Some content inside the right popover">
        Right Popover
    </button>
</div>

<script>
$(function (){

$("[data-toggle='popover']").popover(); }); </script> </div>


The results are as follows:

## Options

Some options are added via the Bootstrap Data API or called through JavaScript. The table below lists these options:

| Option Name | Type/Default Value | Data Attribute Name | Description |
| --- | --- | --- | --- |
| animation | boolean <br> Default: true | data-animation | Apply a CSS fade transition to the popover. |
| html | boolean <br> Default: false | data-html | Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
| placement | string|function <br> Default: top | data-placement | Specifies how to position the popover (i.e., top|bottom|left|right|auto). <br>When specified as auto, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display as left-aligned as possible, otherwise, it will display right-aligned. |
| selector | string <br> Default: false | data-selector | If a selector is provided, popover objects will be delegated to the specified targets. |
| title | string | function <br> Default: '' | data-title | If no title attribute is specified, the title option is the default title value. |
| trigger | string <br> Default: 'hover focus' | data-trigger | Defines how the popover is triggered: click| hover | focus | manual. You can pass multiple triggers separated by spaces. |
| delay | number | object <br> Default: 0 | data-delay | Delay showing and hiding the popover in milliseconds - does not apply to manual trigger type. If a number is supplied, delay is applied to both show and hide. If an object is supplied, the structure is as follows: delay:<br>{ show: 500, hide: 100 } |
| container | string | false <br> Default: false | data-container | Appends the popover to a specified element. <br>Example: container: 'body' |

## Methods

Here are some useful methods in the Popover plugin:

| Method | Description | Example |
| --- | --- | --- |
| Options:.popover(options) | Attaches popover handlers to a collection of elements. |  $().popover(options) |
| Toggle:.popover('toggle') | Toggles the visibility of the popover for an element. |  $('#element').popover('toggle') |
| Show:.popover('show') | Reveals the popover for an element. |  $('#element').popover('show') |
| Hide:.popover('hide') | Hides the popover for an element. |  $('#element').popover('hide') |
| Destroy:.popover('destroy') | Hides and destroys the popover for an element. |  $('#element').popover('destroy') |

### Example

The following example demonstrates the methods of the Popover plugin:

## Example

<div class="container" style="padding: 100px 50px 10px;"> <button type="button" class="btn btn-default popover-show" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="Some content in the popover on the left — show method"> Popover on the left </button>

```html
<button type="button" class="btn btn-primary popover-hide"
        title="Popover title" data-container="body"
        data-toggle="popover" data-placement="top"
        data-content="Some content in the top Popover — hide method">
    Top Popover
</button>
<button type="button" class="btn btn-success popover-destroy"
        title="Popover title" data-container="body"
        data-toggle="popover" data-placement="bottom"
        data-content="Some content in the bottom Popover — destroy method">
    Bottom Popover
</button>
<button type="button" class="btn btn-warning popover-toggle"
        title="Popover title" data-container="body"
        data-toggle="popover" data-placement="right"
        data-content="Some content in the right Popover — toggle method">
    Right Popover
</button><br><br><br><br><br><br>
<p class="popover-options">
    &lt;a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"
       data-container="body" data-toggle="popover" data-content="
     <h4>Some content in the Popover — options method</h4>">
        Popover
    </a>
</p>
<script>
$(function () { $('.popover-show').popover('show');});
    $(function () { $('.popover-hide').popover('hide');});
    $(function () { $('.popover-destroy').popover('destroy');});
    $(function () { $('.popover-toggle').popover('toggle');});
    $(function () { $(".popover-options a").popover({html : true });});
</script>
</div>

| hidden.bs.popover | This event is triggered when the popover is hidden from the user (will wait for the CSS transition to complete). | $('#mypopover').on('hidden.bs.popover', function () {<br> // Perform some actions...<br>}) |

Example

The following example demonstrates the events of the Popover plugin:

Example

<div class="container" style="padding: 100px 50px 10px;">
    <button type="button" class="btn btn-primary popover-show"
            title="Popover title" data-container="body"
            data-toggle="popover"
            data-content="Some content in the popover on the left — show method">
        Left Popover
    </button>
</div>
<script>
$(function () { $('.popover-show').popover('show');});
    $(function () { $('.popover-show').on('shown.bs.popover', function () {
        alert("Alert message when shown");
    })
});
</script>
</div>

The result is as follows:

❮ Bootstrap Thumbnails Bootstrap V2 Less ❯