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

<head>
<script type="text/javascript">
    $(document).ready(function () {
        $(".popover-pop a").popover({
            title:'Step by step'
        });
    });
</script>
</head>
<body>
    <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>
        </ul>
    </div>
</body>

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

output

Views: 4686 | Post Order: 48

Bootstrap > Popovers

Popover with title in Bootstrap

How to get the title in the popover using Bootstrap?

Popover with title

Related Posts

Utility Tools