Make Bootstrap Popover Appear/Disappear on Hover Instead of Click

By default, Bootstrap’s popover box appears when the user clicks a specific element. However, you can also force this popover message box to appear on mouse hover instead of mouse click. There are two ways to accomplish this tasks.

Method 1: By adding data-trigger attribute to HTML markup

You can make the popover appear on mouse hover by simply adding data-toggle attribute to your HTML element and setting its value to hover.

<button id="pop1" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Sample Popover 1" data-placement="top" data-content="This is first sample popover">Popover 1</button>

Method 2: By passing trigger argument while initialization.

In this method, you can simply pass trigger while initialization of popup and set it to hover.

$(function () {
    $('#pop2').popover({ trigger: "hover" });

Must Read: CSS Flip Animation


Leave a Comment.