Bootstrap Popover

Popover is very much similar to tooltip which appears after clicking on the element and it can contain more content too.

To use tooltip, don’t forget to add script at the bottom of the page.
<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });
</script>
Then, you can add any of these in your html depending upon in which direction you want the popover to move either top, bottom, left or right.

Bootstrap Popover on Top

Code Structure
<div class="container">
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Popover on Top." data-placement="top">Toggle popover</a>
</div>

Bootstrap Popover on Bottom

Code Structure
<div class="container">
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Popover on Bottom." data-placement="bottom">Toggle popover</a>
</div>

Bootstrap Popover on Left

Code Structure
<div class="container">
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Popover on Left." data-placement="left">Toggle popover</a>
</div>

Bootstrap Popover on Right

Code Structure
<div class="container">
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Popover on Right." data-placement="right">Toggle popover</a>
</div>

Bootstrap Popover Close Anywhere

Code Structure
<div class="container">
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Click anywhere to close popover" data-placement="bottom" data-trigger="focus">Toggle popover</a>
</div>

Bootstrap Popover On Hover

Code Structure
<div class="container">
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Hover to open popover" data-placement="bottom" data-trigger="hover">Toggle popover</a>
</div>

Share this

Related Posts