Popover with hover in Bootstrap

How to get the popover using placing hover on element using bootstrap

Popover with hover

We can get the popover by placing the hover on element

<head>
<script type="text/javascript">
    $(document).ready(function () {
        $(".popover-pop a").popover({
            trigger: 'hover',
            
        });
    });
    </script>
</head>
<body>
    <h2>Popover with hover</h2>
    <div>
        <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>
            <li><a href="#" class="btn btn-danger" data-toggle="popover"title="Step by step" data-content="Tutorials">TechFunda</a></li>
        </ul>
    </div>
</body>

In the above code snippet we have defined to get the popover by placing the hover on the element
In the body section of the HTML page we have value of class attribute as popover-pop in the ul element and we have defined the list values with anchor tag, we have two buttons with different values using data-toggle as popover, with title and data-content
In the head section of the HTML page we have script function, we have the function $(".popover-pop a").popover({}) to call the popover in the body section and the function trigger: 'hover', is used to get the popover when the mouse is placed on the element

output

Views: 7204 | Post Order: 49

Bootstrap > Popovers

Popover with hover in Bootstrap

How to get the popover using placing hover on element using bootstrap

Popover with hover

Related Posts

Utility Tools