Popover

Required Javascript for this component is at the end of this page.

Toggle popover
<Code> 
<!-- Popover on a Link -->
<a href="#" data-toggle="popover" title="Popover Header"
   data-content="Some content inside the popover">
    Toggle popover
</a>
<Code> 
<!-- Popover on a Button -->
<button type="button" class="btn btn-ms btn-blue-600 ripple" data-toggle="popover"
    title="Popover Header" data-content="Some content inside the popover">
    Toggle popover
</button>

Positioning Popovers

Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element

Toggle popover
Toggle popover
Toggle popover
Toggle popover
<Code> 
<!-- Popover Top -->
<a href="#" data-toggle="popover" data-placement="top"
   title="Popover Header" data-content="Some content inside the popover">
    Toggle popover
</a>
<!-- Popover Right -->
<a href="#" data-toggle="popover" data-placement="right"
   title="Popover Header" data-content="Some content inside the popover">
    Toggle popover
</a>
<!-- Popover Left -->
<a href="#" data-toggle="popover" data-placement="left"
   title="Popover Header" data-content="Some content inside the popover">
    Toggle popover
</a>
<!-- Popover Bottom -->
<a href="#" data-toggle="popover" data-placement="bottom"
   title="Popover Header" data-content="Some content inside the popover">
    Toggle popover
</a>

Closing Popovers

By default, the popover is closed when you click on the element again. However, you can use the data-trigger="focus" attribute which will close the popover when clicking outside the element

Toggle popover
<Code> 
<!-- Dismissible Popover -->
<a href="#" data-toggle="popover" data-trigger="focus" title="Dismissible Popover"
   data-content="Click anywhere in the document to close this popover">
    Toggle popover
</a>

Popover on hover

If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger attribute with a value of "hover"

Toggle popover
<Code> 
<!-- Showing popovers on Hover -->
<a href="#" data-toggle="popover" data-trigger="hover" title="Popover on Hover"
   data-content="Click anywhere in the document to close this popover">
    Toggle popover
</a>

Javascript

<script>
    $(function() {
        // Initialize Popover
        $('[data-toggle="popover"]').popover();
    });
</script>

On this page