Similar to a tooltip, we also have Bootstrap Popovers.
A popover is different in that it accommodates more content, including a header.
In this example we have applied the popover to a link element. The popover is positioned to the right, but as you will see this can be changed.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<a href="#" data-trigger="hover" data-toggle="popover" title="Test Header" data-content="Sample Paragraph." data-placement="right">Popover</a>
To create a popover, select or create an html element that you would like to apply it to.
In this case we have applied it to a link element using the
In our element we have created a data-toggle attribute set to popover. This is necessary for the popover to function.
We can give the popover a title. In this case we set it to Test Header.
We can also give the popover some content using the data-contentattribute.
We have the text: sample paragraphdisplayed in our popover content area.
Lastly, we have a data-placement attribute which allows you to specify the position of the popover.
In this case we have it set to right. Other options include top, bottom and left.
Once you have completed that portion, it is necessary to initialize the popover using jQuery.
In our browser we can see that the popover opens when we click on the link. It only closes if we click on the link again.
We can add the attribute data-trigger="focus" to make it so we can exit the popover by clicking anywhere else on the page.
If we set the data-trigger class to hover, we can view and dismiss the popover by placing our mouse on and off the element.