Bootstrap Popovers

In this tutorial you will learn how to create popovers with Bootstrap.

Creating Popovers with Bootstrap

Popover is a small overlay of content that is used to display secondary information of any element when it is clicked by a user, like those on the iPad.

Triggering the Popovers

Popovers can be triggered via JavaScript — just call the popover() Bootstrap method with the id or class selector of the required element in your JavaScript code.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('[data-toggle="popover"]').popover();   
  • });
  • </script>

— The output of the above example will look something like this:

 

Note:For performance reasons, the tooltip and popover data-apis are opt in, means to use tooltips and popovers you must initialize them yourself.


Setting the Directions of Popovers

You can set popovers to appear on top, right, bottom and left sides of an element.

Positioning of Popovers via Data Attributes

The following example will show you how to set the direction of popovers via data attributes.

  • <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Default popover">Popover on top</button>
  • <button type="button" class="btn btn-success" data-toggle="popover" data-placement="right" title="Popover title" data-content="Popover on right.">Popover on right</button>
  • <button type="button" class="btn btn-info" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="Popover on bottom.">Popover on bottom</button>
  • <button type="button" class="btn btn-warning" data-toggle="popover" data-placement="left" title="Popover title" data-content="Popover on left.">Popover on left</button>

Positioning of Popovers via JavaScript

The following example will show you how to set the direction of popovers via JavaScript.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".pop-top").popover({placement : 'top'});
  •     $(".pop-right").popover({placement : 'right'});
  •     $(".pop-bottom").popover({placement : 'bottom'});
  •     $(".pop-left").popover({ placement : 'left'});
  • });
  • </script>

Hiding the Popovers on Next Click

By default popovers are not hiding until you click the trigger element once again. You can use the focus trigger to hide the popovers when the user makes the next click.

  • <a href="#" class="btn btn-primary btn-lg" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Here's some amazing content.">Dismissible popover</a>
 

Note:To make this feature work properly across the browsers, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.


Options

There are certain options which may be passed to popover() Bootstrap method to customize the functionality of the tooltip plugin.

Name Type Default Value Description
animation boolean true Apply a CSS fade transition to the popover.
html boolean false 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 'right'

Sets the position of the popover — top | bottom | left | right | auto. When "auto" value is specified, it will dynamically reorient the popover.

For example, if placement value is "auto left", the popover will display to the left when possible, otherwise it will display to right.

selector string false If a selector is provided, popover objects will be attached to the specified targets.
title string | function '' Sets the default title value if title attribute isn't present.
trigger string 'click' Specify how popover is triggered — click | hover | focus | manual.
content string | function '' Sets the default content value if data-content attribute isn't present.
delay number | object 0

Time to delay in showing and hiding the popover (ms) — does not apply to manual trigger type.

If a number is supplied, delay is applied to both hide/show Object structure is: delay: { show: 500, hide: 100 }

container string | false false Appends the popover to a specific element container: 'body'
template string

'<div class="popover">
<div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML to use when creating the popover. The popover's title and content will be inserted into the elements having the class .popover-title and .popover-content respectively. Whereas the element with the class .arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.

viewport string | object { selector: 'body', padding: 0 } Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { selector: '#viewport', padding: 0 }

You may set these options either through the use of data attributes or JavaScript. For setting the popovers options via data attributes, just append the option name to data- along with the correct value, like data-animation="false", data-placement="bottom" etc.

However, JavaScript is the more preferable way for setting these options as it saves you from doing the repetitive work. See the popover's method $().popover(options) in the section below to know how to set the options for popovers using the JavaScript.


Methods

These are the standard Bootstrap's popover methods:

$().popover(options)

This method attaches the popover handler to a group of elements. It also allows you to set the options for the popovers so that you can customize them according to your needs.

The following example will insert the specified text inside the popovers title if the value of the title attribute is omitted or missing from the selected elements:

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("#myPopovers a").popover({
  •         title: 'Default title value'
  •     });
  • });
  • </script>

The following jQuery code will trigger the popovers on mouse hover instead of click:

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('[data-toggle="popover"]').popover({
  •         trigger: 'hover'
  •     });
  • });
  • </script>

The following example will show you how to place the HTML content inside a popover:

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("#myPopover").popover({
  •         title: '<h3 class="custom-title"><span class="glyphicon glyphicon-info-sign"></span> Popover Info</h3>',
  •         content: '<p>This is a <em>simple example</em> demonstrating how to insert HTML code inside <mark><strong>Bootstrap popover</strong></mark>.</p>',
  •         html: true
  •     }); 
  • });
  • </script>

The following example will show you how to control the timing of showing and hiding of the popover using the popover's delay option via JavaScript.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Showing and hiding popover with same speed
  •     $(".popover-tiny").tooltip({
  •         delay: 500
  •     });
  •     
  •     // Showing and hiding popover with different speed
  •     $(".popover-large").tooltip({
  •         delay: {show: 0, hide: 2000}
  •     }); 
  • });
  • </script>

The following example will show you how you can create your own custom template for the Bootstrap popovers instead of using the default one.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('[data-toggle="popover"]').popover({
  •         html: true,
  •         template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer"><a href="#" class="btn btn-info btn-sm">Close</a></div></div>'
  •     });
  •     
  •     // Custom jQuery to hide popover on click of the close button
  •     $(document).on("click", ".popover-footer .btn" , function(){
  •         $(this).parents(".popover").popover('hide');
  •     });
  • });
  • </script>

The following example will insert the dynamically generated HTML code of the popover at the end of a .wrapper element instead of the <body> element.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Append popover HTML to wrapper element
  •     $("#myPopovers a").popover({container: '.wrapper'}); 
  • });
  • </script>
 

Note:Overriding the popover's default container option value does not produce any visible difference on the page. To see the actual result you need inspect the resulting DOM using the Firebug or Developer tools.

Similarly, you can set other options for the popovers using the $().popover(options) method. Let's check out the other methods of the Bootstrap popover plugin.

.popover('show')

This method reveals an element's popover.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".show-popover").click(function(){
  •         $("#myPopover").popover('show');
  •     }); 
  • });
  • </script>

.popover('hide')

This method hides an element's popover.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".hide-popover").click(function(){
  •         $("#myPopover").popover('hide');
  •     }); 
  • });
  • </script>

.popover('toggle')

This method toggles an element's popover.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".toggle-popover").click(function(){
  •         $("#myPopover").popover('toggle');
  •     }); 
  • });
  • </script>

.popover('destroy')

This method hides and destroys an element's popover.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".destroy-popover").click(function(){
  •         $("#myPopover").popover('destroy');
  •     }); 
  • });
  • </script>

Events

Bootstrap's popover class includes few events for hooking into popover functionality.

Event Description
show.bs.popover This event fires immediately when the show instance method is called.
shown.bs.popover This event is fired when the popover has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.popover This event is fired immediately when the hide instance method has been called.
hidden.bs.popover This event is fired when the popover has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.
inserted.bs.popover This event is fired after the show.bs.popover event when the popover template has been added to the DOM.

The following example displays an alert message to the user when fade out transition of the popover has been fully completed.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('[data-toggle="popover"]').on('hidden.bs.popover', function(){
  •         alert("Popover has been completely closed.");
  •     });
  • });
  • </script>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.