Popovers are similar to tooltips in that they can provide users with additional information about an element, but they are designed to show a little more content, as popovers also allow you to display a header.

Popovers are defined in a similar fashion to a popup, by adding the data-toggle, data-placement, data-content, and title attributes to an element. The following markup displays a popup when a user clicks on an anchor <a> element:

<a data-content="The protagonist of Franz Kafka's short story The Metamorphosis" data-placement="bottom"  data-toggle="popover" href="#" >Gregor Samsa</a> 

Setting the data-toggle attribute to popover specifies to the plugin that it needs to show a popover. The data-content attribute contains the content that will be shown inside the popover, and the data-original-title attribute sets the title of the popover. The data-placement attribute indicates the placement of the popover and supports four values, namely top, bottom, left, and right.

You can also specify the trigger that will show the popover by setting the data-trigger attribute's value. Popovers can be triggered when a user clicks or hovers over the element, or when the element has focus. You can also specify that the trigger should be activated manually. The four options for the data-trigger attribute are click, hover, focus, and manual.

As with tooltips, the data- API is an opt-in, so you will need to initialize the popover plugin manually. In the following code, using jQuery, we'll find all elements on a page whose data-toggle attribute is set to popover and initialize the popover plugin for each one:

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

The popover plugin will appear similar to the following screenshot in your browser: