Create responsive website with Bootstrap

Bootstrap tutorial includes all topics such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

Bootstrap Popover


The popover is similar to tooltip, offering an extended view complete with a heading.

How To Create a Popover

To create a popover, add the data-toggle="popover" attribute to an element.

Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover's body

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

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

Positioning Popovers

By default, the popover will appear on the right side of the element. Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element:

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</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:

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

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":

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>