Bootstrap > Popovers

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: 477 | Post Order: 48



Write for us