205

I'm building a website with Bootstrap's Popover and I can't figure out how to make the popover appear on hover instead of click.

All I want to do is have a popover appear when someone hovers over a link instead of clicking on it and for the popover to disappear when they move away. The documentation says it's possible using either the data attribute or jquery. I'd much rather do it with jquery since I have multiple popovers.

pants
  • 192
  • 13
Muhambi
  • 3,472
  • 6
  • 31
  • 55
  • 26
    Tip: Hover sucks on touch devices. If you want to ensure usability for touchscreens, don't bind functionality to hover. – Jørgen R Sep 09 '12 at 23:04

6 Answers6

403

Set the trigger option of the popover to hover instead of click, which is the default one.

This can be done using either data-* attributes in the markup:

<a id="popover" data-trigger="hover">Popover</a>

Or with an initialization option:

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

Here's a DEMO.

totymedli
  • 29,531
  • 22
  • 131
  • 165
João Silva
  • 89,303
  • 29
  • 152
  • 158
  • Thanks for the reply. How do I set a trigger option to this code? `` – Muhambi Sep 09 '12 at 23:05
  • 9
    @Jake: Use `$("#popover").popover({ trigger: "hover" });`. – João Silva Sep 09 '12 at 23:07
  • Thanks! for some reason I needed to implement both data-trigger and the JS initialization. – Anthony Feb 12 '16 at 01:57
  • Can anyone help me understand which is the better option, JS initialization or data-attributes ? Even if I use data-attributes, I still would have to call $("#popover").popover(); from my JavaScript. – Meghan Jan 03 '18 at 07:58
  • @Bailey It would depend on what your coding rules are and if you are working with any particular coding standards, and then personal preference. Looking at the two, I prefer targeting the trigger option within popover() function. Seems more readable to me. – Sambuxc Apr 09 '20 at 15:47
34

I'd like to add that for accessibility, I think you should add focus trigger :

i.e. $("#popover").popover({ trigger: "hover focus" });

Calexo
  • 361
  • 3
  • 3
19

If you want to hover the popover itself as well you have to use a manual trigger.

This is what i came up with: 

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(_this).is(':hover')) // change $(this) to $(_this) 
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}
Sahil Patel
  • 1,570
  • 2
  • 15
  • 34
Johannes Ferner
  • 718
  • 7
  • 15
  • Can you share the HTML you used? Maybe it was too long ago. I have found your answer is one of the best, specifically because the popover stays open when you hover on the popover itself. But I'm having trouble figuring out where to place the classes "thumbPopover" and "thumbcontainer". – robquinn Sep 03 '20 at 12:19
6

The functionality, you described, can be easily achieved using the Bootstrap tooltip.

<button id="example1" data-toggle="tooltip">Tooltip on left</button>

Then call tooltip() function for the element.

$('#example1').tooltip();

http://getbootstrap.com/javascript/#tooltips

VforVitamin
  • 946
  • 10
  • 12
1

After trying a few of these answers and finding they don't scale well with multiple links (for example the accepted answer requires a line of jquery for every link you have), I came across a way that requires minimal code to get working, and it also appears to work perfectly, at least on Chrome.

You add this line to activate it:

$('[data-toggle="popover"]').popover();

And these settings to your anchor links:

data-toggle="popover" data-trigger="hover"

See it in action here, I'm using the same imports as the accepted answer so it should work fine on older projects.

Peter
  • 3,186
  • 3
  • 26
  • 59
1

From Bootstrap version 5.1

you have to use data-bs-* instead of data-*

<a id="popover" data-bs-trigger="hover">Popover</a>
Gert Rikkers
  • 21
  • 1
  • 5