Bootstrap > Popovers

Popover with title in Bootstrap

How to get the title in the popover using Bootstrap?

Popover with title

We can also set title to the popovers using title in the script function 

<script type="text/javascript">
    $(document).ready(function () {
        $(".popover-pop a").popover({
            title:'Step by step'
    <h2>Popover with title</h2>
    <div class="well">
        <ul class="popover-pop list-inline">
            <li><a href="#" class="btn btn-warning"  data-placement="bottom" data-toggle="popover" title="Forums" data-content="Resolved Posts">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger"  data-placement="bottom" data-toggle="popover" data-content="Tutorials">TechFunda</a></li>
  • In the above code snippet we have defined the popover with title
  • In the body section of HTML page we have value of class attribute as well, class attribute value as popover-pop in the ul element of div section, li elements  consists of  anchor tag with two buttons as DotNetFunda and TechFunda with  btn-warning and button-danger, we have not defined title in the value TechFunda, data-placement places the position of the popover , data-content shows the content in the popover 
  • In the head section of HTML page we have the script function using jQuery, we have the function  $(".popover-pop a").popover({}) which calls the function of popover-pop in the body section and we have given the value as title :'step by step' which gives the title to the value TechFunda


 Views: 499 | Post Order: 47

Write for us