Logo

Base Example

Initialize all popovers on a page by adding the data-toggleattribute.


                                <button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="click" title="Example content">
                                    Click to toggle popover
                                </button>

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

Directions

Four options are available: top, right, bottom, and leftaligned.


                        <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Example content">
                            Popover on top
                        </button>

                        <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Example content">
                            Popover on right
                        </button>

                        <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Example content">
                            Popover on bottom
                        </button>

                        <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Example content">
                            Popover on left
                        </button>

Disabled Elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip).


                        <span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
                            <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
                        </span>

Dismiss On Next Click

Use the focustrigger to dismiss popovers on the user’s next click of a different element than the toggle element.


                        <a tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" title="Dismissible popover" data-content="Example content">
                            Dismissible popover
                        </a>

HTML Content

Insert any HTML into the popover.


                        <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-html="true" data-content="And here's some amazing <span class='label label-inline font-weight-bold label-light-primary'>HTML</span> content. It's very <code>engaging</code>. Right?">
                            Click me
                        </button>

Offset

Offset of the popover relative to its target. For more information refer to Tether's offset docs.


                        <button type="button" class="btn btn-primary mr-2" data-container="body" data-offset="20px 20px" data-toggle="popover" data-placement="top" data-content="Example content">
                            Example 1
                        </button>
                        <button type="button" class="btn btn-success mr-2" data-container="body" data-offset="-20px -20px" data-toggle="popover" data-placement="top" data-content="Example content">
                            Example 2
                        </button>
                        <button type="button" class="btn btn-danger" data-container="body" data-offset="60px 0px" data-toggle="popover" data-placement="top" data-content="Example content">
                            Example 3
                        </button>

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%