Skip to main content

Dismiss Bootstrap Popover on Next Click

Dismiss Bootstrap Popover on Next Click

To dismiss a Bootstrap popover on next-click you must use the < a > tag as the popover trigger, with tabindex and role properties.

Here’s a quick working example:

  • Sun

  • Earth

The example above was created with the following markup:

Sun <a tabindex="0" class="my-popover" role="button" data-toggle="popover" data-trigger="focus" title="Sun" data-content="The star around which the earth orbits."><i class="fa fa-info-circle"></i></a>

Earth <a tabindex="0" class="my-popover" role="button" data-toggle="popover" data-trigger="focus" title="Earth" data-content="The planet on which we live; the world."><i class="fa fa-info-circle"></i></a>

And don’t forget to enable popovers via JavaScript:

<script>
    $(function () {
        $(".my-popover").popover();
    })
</script>

That’s all there’s to it. Cheers!