0

Keeping a popover open while hovering over it has been answered here (How can I keep bootstrap popover alive while the popover is being hovered?) and providing the popover with data from an AJAX call had been answered here (Load a Bootstrap popover content with AJAX. Is this possible?). Both work fine on their own, but I haven't been able to get them to work together.

The AJAX data needs to be provided before the popover is shown so that the popover can resize and position itself correctly. What I've tried to do is use the handlerIn and handlerOut of .hover() but the popovers wont close (when you click the original trigger or when the mouse is no longer over the popover):

$j("#popoverTest").hover(
    function () {
        var e = $j(this);
        e.off('hover');
        $j.get(e.data('ajax'),function(data) {
            e.popover({
                html: true,
                placement: 'auto',
                content: data,
                trigger: 'manual'
            }).popover('show');
        });
    }, function() {
        var e = $j(this);
        setTimeout(function () {
            if (!$j(".popover:hover").length) {
                $j(e).popover("hide");
            }
        }, 300);
    }
);

I'm using Bootstrap v3.3.6 - Thanks in advance for comments / suggestions!

2
  • There are some good examples here have you tried them ? Especially the second answer already appears close to your coding.
    – ODelibalta
    Jul 22, 2016 at 20:37
  • @ODelibalta Yeeeah.. I've linked to that in my question.
    – Clint
    Jul 22, 2016 at 20:45

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.