Bootstrap Popover

admin

9 years ago

Bootstrap Popover is something like toltips but contains more information than the toltips. It Display information when user clicks on it or hovers on it. The four positions of popover plugin are available top, bottom, left , Right. Positions are defined in data attribute data-placement=”top”, data-placement=”bottom”,data-placement=”left” and data-placement=”right” .

Note : Bootstrap Popover plugin requires the javascript read and you have to add the following javascript code in head..

Bootstrap Popover Syntax

We are going to explain with very basic example and demo-

Bootstrap Popover : Basic Example


 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="top" data-content="Demo Content">Click</a>

Try it »

Popovers can also be triggered using javascript as in example below:

popover plugin example

Bootstrap Popover : Positions Example


 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="top" data-content="Demo Content">Top</a>
 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="left" data-content="Demo Content">Lett</a>
 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="right" data-content="Demo Content">Right</a>
<a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="bottom" data-content="Demo Content">Bottom</a>

Try it »

Full Code :



<title>Bootstrap Grid</title>
<!-- Latest compiled and minified CSS -->


<!-- Optional theme -->


<!-- Latest compiled and minified JavaScript -->




<div class="container amp-wp-inline-e818ff63e6479ce90e6810463b58ea4a">

 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="top" data-content="Demo Content">Top</a><br/>
 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="left" data-content="Demo Content">Lett</a><br/>
 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="right" data-content="Demo Content">Right</a><br/>
<a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="bottom" data-content="Demo Content">Bottom</a>
</div>

Bootstrap Home

Bootstrap Grid System

Bootstrap Buttons

Bootstrap Forms

Bootstrap Jumbotron

Bootstrap Navigation Bar

Bootstrap pagination

Bootstrap Alerts

Bootstrap Breadcrumbs

Bootstrap Dropdown

Bootstrap Tooltip

Bootstrap Tables