Popover with delay in Bootstrap

How to delay the popover using Bootstrap?

Popover delay

We can also set some delay to the popovers. For that, we have to use delay property of Bootstrap

Example of the popover delay

<script type="text/javascript">
    $(document).ready(function () {
        $(".popover-pop a").popover({
            delay: {show:1000}
        });
    });
</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>

In the above code snippet we have defined popover with delay, using delay property
In the body section of HTML page, we have value of class attribute as well in the div section and we have value of class attribute as popover-pop list-inline, ul element consists of <a> anchor tag in the list values and data-toggle as popover, title as Forums and data-content as Resolved posts
We have the value as DotNetFunda in the anchor tag 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 the HTML page we have the script function to call the popover-pop in the head section, we use jQuery function as $(".popover-pop a").popover()with delay:{show:1000} which delays the popover after clicking the element

output

Views: 11171 | Post Order: 47

Bootstrap > Popovers

Popover with delay in Bootstrap

How to delay the popover using Bootstrap?

Popover delay

Related Posts

Utility Tools