Bootstrap > Popovers

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: 382 | Post Order: 45



Write for us