Popover in Bootstrap

How to create popovers using Bootstrap?

Popovers

Popovers are similar to tooltips, it is a popbox when the user clicks the button, it opens the popover which contains title and data-content in the popover, we use data-toggle as popover to create popover and we can create popovers with the title, delay show popovers, popovers with triggering

<head>
<script type="text/javascript">
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover()
    });
</script>
</head>
<body>
    <h2>Popovers</h2>
    <div class="well">
        <a href="#" class="btn btn-warning" data-toggle="popover" title="Forums" data-content="Resolved Posts">DotNetFunda</a>
    </div>
</body>

In the above code snippet we have defined popover,
In the body section of HTML page we have value of class attribute well and in the div section we have an anchor tag <a> defining value of class attribute btn-warning with data-toggle as popover and title as Forums, title defines the title of the popover and data-content defines the content of the popover
We have the value as DotNetFunda in the anchor tag which creates the value dotnetfunda with btn-warning and when the user clicks the button the popover comes with title as Forums and content as Resolved posts
In the head section of HTML page we have the script function to call the popover in the head section, we use jQuery function as $('[data-toggle="popover"]').popover() which calls the function data-toggle as popover in the body section

output

Another way of creating popovers

We can create popovers in another way

<script type="text/javascript">
    $(document).ready(function () {
        $(".popover-pop a").popover()
    });
</script>
</head>
<body>
    <h2>Popovers</h2>
    <div class="well">
        <ul class="popover-pop list-inline">
            <li><a href="#" class="btn btn-warning" data-toggle="popover" title="Forums" data-content="Resolved Posts">DotNetFunda</a></li>
        </ul>
    </div>
</body>

Popover

In the above code snippet we have defined popover,
In the body section of HTML page we have the class attribute well in the div section and we have class attribute as popover-pop listinline in the ul element and we have the <a> anchor tag in the li element and data-toggle as popover, title as Forums and data-content as Resolved posts
We have the value as DotNetFunda in the anchor tag which creates the value dotnetfunda with btn-warning and when the user clicks the button the popover comes with title as Forums and content as Resolved posts
In the head section of HTML page we have the script function to call the popover in the head section, we use jQuery function as $(".popover-pop a").popover() which calls the function popover-pop in the ul element

output

Views: 3833 | Post Order: 46

Bootstrap > Popovers

Popover in Bootstrap

How to create popovers using Bootstrap?

Popovers

Another way of creating popovers

Related Posts

Utility Tools