Rectangle 27 297

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:

Here's a DEMO.

<script>   	$(function ()   	{ $("#popover").popover();   	}); 	</script>
$("#popover").popover({ trigger: "hover" });

javascript - Make Bootstrap Popover Appear/Disappear on Hover instead ...

javascript jquery twitter-bootstrap
Rectangle 27 14

Heres an updated solutions based off your comment. It doesn't stay in a 'click' state but returns to the hover state.

var $btn2 = $('#btn2');
$btn2.data('state', 'hover');

var enterShow = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('show');
    }
};
var exitHide = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('hide');
    }
};

var clickToggle = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.data('state', 'pinned');
    } else {
        $btn2.data('state', 'hover')
        $btn.popover('hover');
    }
};

$btn2.popover({trigger: 'manual'})
    .on('mouseenter', enterShow)
    .on('mouseleave', exitHide)
    .on('click', clickToggle);

I believe this is what you are looking for:

<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>
var $btn2 = $('#btn2');

var enterShow = function() {
    $btn2.popover('show');
};

var exitHide = function() {
    $btn2.popover('hide');
}

$btn2.popover({trigger: 'manual'})
        .on('mouseenter', enterShow)
        .on('mouseleave', exitHide)
        .one('click', function() {
            $btn2.off('mouseenter', enterShow)
                    .off('mouseleave', exitHide)
                    .on('click', function() {
                        $btn2.popover('toggle');
                    });
        });

Basically you manually pop open/close the popover on the mouseenter and mouseleave events, but once someone clicks on the popover for the first time, you remove those event handlers, and add a new handler on the click event that toggles the popover.

Edit: an alternative js code. simpler code, but there is a small visual blip when you use it: http://jsfiddle.net/hajpoj/r3Ckt/1/

var $btn2 = $('#btn2');

$btn2.popover({trigger: 'hover'})
    .one('click', function() {
        $btn2.popover('destroy')
            .popover({ trigger: 'click'})
            .popover('show');
    });

The above code works great, except for one detail. Once you 'click' and pin the popover, and then 'click' to remove the popover, the mouseenter/mouseleave events no longer function. See the edit to the original question to see my attempt at re-enabling this functionality. It almost works...

@hajpoj, I had a problem with the edited answer. The line $btn.popover('hover'); is incorrect. It should be $btn2.popover('show'); since it gives script error for hover in popover function.

javascript - Bootstrap 3 Popover: display on hover AND on click, aka. ...

javascript jquery twitter-bootstrap popover
Rectangle 27 3

Very simple, add hover to data-trigger as follows:

<span rel="popover" data-trigger="hover click" data-container="body" data-placement="auto" data-content="Body Text"></span>

This does add both handlers but the click doesn't pin it. When you mouse-out after clicking to show it, it disappears.

javascript - Bootstrap 3 Popover: display on hover AND on click, aka. ...

javascript jquery twitter-bootstrap popover
Rectangle 27 4

Here's a hybrid popover/tooltip that could give you the functionality that you are looking for both options, toggles on click and hover):

<button id="tip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title='this text!'>What's hidden?</button>
var $tip1 = $('#tip1');

$tip1.tooltip({trigger: 'hover'})
  .on('click', function() {
    $tip1.tooltip('toggle');
});

javascript - Bootstrap 3 Popover: display on hover AND on click, aka. ...

javascript jquery twitter-bootstrap popover
Rectangle 27 6

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

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);
    });
}

javascript - Make Bootstrap Popover Appear/Disappear on Hover instead ...

javascript jquery twitter-bootstrap
Rectangle 27 84

<a href="#" id="blob" class="btn large primary" rel="popover">hover for popover</a>

var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';

$("#blob").popover({ title: 'Look! A bird!', content: img, html:true });

html:true is required to make the html being rendered correctly :(

trigger: 'hover'

javascript - How do I use popover from Twitter Bootstrap to display an...

javascript twitter-bootstrap popover
Rectangle 27 107

Small modification (From the solution provided by vikas) to suit my use case. 1. Open popover on hover event for the popover button 2. Keep popover open when hovering over the popover box 3. Close popover on mouseleave for either the popover button, or the popover box.

$(".pop").popover({ trigger: "manual" , html: true, animation:false})
.on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 300);
});

This works perfectly, I did notice that there was a missing ; in you second $(_this).popover("hide"). But thank you, it was so simple and clean!

This answer is amazing. Works great on BS3 as of May 2015 ^^

I used it in a table and I added container: 'body' to the options because it made the cells shift. Great answer!

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 106

Small modification (From the solution provided by vikas) to suit my use case. 1. Open popover on hover event for the popover button 2. Keep popover open when hovering over the popover box 3. Close popover on mouseleave for either the popover button, or the popover box.

$(".pop").popover({ trigger: "manual" , html: true, animation:false})
.on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 300);
});

This works perfectly, I did notice that there was a missing ; in you second $(_this).popover("hide"). But thank you, it was so simple and clean!

This answer is amazing. Works great on BS3 as of May 2015 ^^

I used it in a table and I added container: 'body' to the options because it made the cells shift. Great answer!

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 26

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

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

javascript - Make Bootstrap Popover Appear/Disappear on Hover instead ...

javascript jquery twitter-bootstrap
Rectangle 27 1

Here's the way I accomplished the hover/pin functionality using Bootstrap and JQuery:

$(function () {
    var clicked = false;

    var onLeave = function() {
        if (!clicked) { $(this).popover('hide'); }
    };

    var onEnter = function () {
        if (!clicked) { $(this).popover('show'); }
    };

    var clickToggle = function() {
        if (clicked) { $(this).popover('hide'); }
        clicked = !clicked;
    }
    $('.popover-div-class').popover({ trigger: "manual"})
        .on('mouseenter', onEnter)
        .on('mouseleave', onLeave)
        .on('click', clickToggle);
});

I'm not sure it'll work in all scenarios, but it worked in mine. Big shoutout to @hajpoj and @Trevor for the inspiration.

JSFiddle: https://jsfiddle.net/5m2ob3yf/ (Doesn't work yet, but you can get the gist).

javascript - Bootstrap 3 Popover: display on hover AND on click, aka. ...

javascript jquery twitter-bootstrap popover
Rectangle 27 20

My best suggestion is to detect whether there is a touch event. If so ("no" ability for hovering), use "click"...if not, use "hover". Try this:

var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
$("#popover").popover({
    trigger: is_touch_device ? "click" : "hover"
});

(the touch detection was taken from the Modernizr library)

Think that trigger: is_touch_device ? "click focus" : "hover focus" would be good solution. Touch detection is desired and that is a pretty clean way to detect it.

trigger: is_touch_device ? "focus" : "hover focus"
placement: $(window).width() < 768 ? 'top' : 'right'

javascript - Twitter bootstrap popover trigger for desktop and mobile ...

javascript css twitter-bootstrap popover
Rectangle 27 20

My best suggestion is to detect whether there is a touch event. If so ("no" ability for hovering), use "click"...if not, use "hover". Try this:

var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
$("#popover").popover({
    trigger: is_touch_device ? "click" : "hover"
});

(the touch detection was taken from the Modernizr library)

Think that trigger: is_touch_device ? "click focus" : "hover focus" would be good solution. Touch detection is desired and that is a pretty clean way to detect it.

trigger: is_touch_device ? "focus" : "hover focus"
placement: $(window).width() < 768 ? 'top' : 'right'

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Twitter bootstrap popover trigger for desktop and mobile ...

javascript css twitter-bootstrap popover
Rectangle 27 2

Tooltip.DEFAULTS = {
 animation: true,
 placement: 'top',
 selector: false,
 template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
 trigger: 'hover focus',
 title: '',
 delay: 0,
 html: false,
 container: false,
 atMouse: false,
 viewport: {
   selector: 'body',
   padding: 0
 }
}

2.Go to the line 1368 inside of method "Tooltip.prototype.enter" and change the following code:

if (obj instanceof $.Event) {
  self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
  self.options.mousePos = {posX: obj['pageX'], posY: obj['pageY']}
}

3.Inside of the method "Tooltip.prototype.show" add following code:

if(this.options.atMouse) {
  pos['posY'] = this.options.mousePos['posY'];
  pos['posX'] = this.options.mousePos['posX'];
}
var calculatedOffset = this.getCalculatedOffset(placement, pos,
        actualWidth, actualHeight)

4.Prepend to the body of Tooltip.prototype.getCalculatedOffset method following code:

if(this.options.atMouse) {
  return placement == 'bottom' ? {top: pos.top + pos.height, left: pos.posX - (actualWidth / 2)} :
  placement == 'top' ? {top: pos.top - actualHeight, left: pos.posX - (actualWidth / 2)} :
  placement == 'left' ? {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.posX - actualWidth} :
  {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.posX}
}
$("[data-toggle='popover']").popover({
    html: true,
    container: 'body',
    atMouse: true,
    trigger: 'hover',
    animation: false,
    placement: "top auto"
  });

javascript - How to make popover appear where my mouse enters the hove...

javascript jquery twitter-bootstrap cursor bootstrap-popover
Rectangle 27 26

Sometimes while moving mouse from popover trigger to actual popover content diagonally, you hover over elements below. I wanted to handle such situations as long as you reach popover content before the timeout fires, you're safe (the popover won't disappear). It requires delay option.

This hack basically overrides Popover leave function, but calls the original (which starts timer to hide the popover). Then it attaches a one-off listener to mouseenter popover content element's.

If mouse enters the popover, the timer is cleared. Then it turns it listens to mouseleave on popover and if it's triggered, it calls the original leave function so that it could start hide timer.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover  call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

Finding the container could be improved by using container = self.$tip; This way, the popover can even be found when the container property is set. There's a fiddle here: jsfiddle.net/dennis_c/xJc65

@pferrel i have solved this issue in my fork of @Wojtek_Kruszewski 's fiddle: jsfiddle.net/HugeHugh/pN26d see the part that checks if (!thisTip.is(':visible')) before calling the originalShow()

If the popover is initialized with the option container: 'body', this solution will not work as expected. The variable container needs to be replaced with self.$tip. Check my answer for more details: stackoverflow.com/a/28731847/439427

Brilliant. This works for when using the 'selector' parameter, unlike the other answers.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 26

Sometimes while moving mouse from popover trigger to actual popover content diagonally, you hover over elements below. I wanted to handle such situations as long as you reach popover content before the timeout fires, you're safe (the popover won't disappear). It requires delay option.

This hack basically overrides Popover leave function, but calls the original (which starts timer to hide the popover). Then it attaches a one-off listener to mouseenter popover content element's.

If mouse enters the popover, the timer is cleared. Then it turns it listens to mouseleave on popover and if it's triggered, it calls the original leave function so that it could start hide timer.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover  call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

Finding the container could be improved by using container = self.$tip; This way, the popover can even be found when the container property is set. There's a fiddle here: jsfiddle.net/dennis_c/xJc65

@pferrel i have solved this issue in my fork of @Wojtek_Kruszewski 's fiddle: jsfiddle.net/HugeHugh/pN26d see the part that checks if (!thisTip.is(':visible')) before calling the originalShow()

If the popover is initialized with the option container: 'body', this solution will not work as expected. The variable container needs to be replaced with self.$tip. Check my answer for more details: stackoverflow.com/a/28731847/439427

Brilliant. This works for when using the 'selector' parameter, unlike the other answers.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 18

In bootstrap-tooltip.js, replace (at about line 72)

, enter: function (e) {
, enter: function (e) {
       var mousePos = { x: -1, y: -1 };
       mousePos.x = e.pageX;
       mousePos.y = e.pageY;
       window.mousePos = mousePos;

and replace (at about line 144)

case 'right':
            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
            break

with

case 'right':
        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
        break
      case 'mouse':
        tp = {top: window.mousePos.y, left: window.mousePos.x}
        break
$('.pop').popover({'placement': 'mouse'});

This is a quick-n-dirty way to go about it (hacking core files), but it works. Perhaps someone else has a nicer method. Note that the popover pointer will need some work as it doesn't appear.

This example was tested in Bootstrap 2.0.3, but the code appears similar in 2.2.2.

javascript - How to make popover appear where my mouse enters the hove...

javascript jquery twitter-bootstrap cursor bootstrap-popover
Rectangle 27 8

The problem is obvisously that the popover does what it is supposed to do. When you attach popovers to <tr>'s, and let the popover respond to hover - and the popover hangs below the <tr>'s bottom - you will never be able to reach the content of the popover.

Trigger:hover can easily be mimicked by trigger:manual like this

$('table').on('mouseenter', 'tr', function() {
    $(this).popover('show');
});
$('table').on('mouseleave', 'tr', function() {
    $(this).popover('hide');    
});

Setting trigger:manual enable us to manipulate the popover behaviour. The solution below adds a little delay to the mouseenter / mouseleave-events, and then check if the mouse is inside the popover (by attaching events to the popover themselves). If the mouse is inside a popover, a new popover will not be shown, and the active popover will not be hidden, even if there has been a mouseenter-event in another <tr>. Forked jsfiddle : http://jsfiddle.net/xZxkq/

var insidePopover=false;

function attachEvents(tr) {
    $('.popover').on('mouseenter', function() {
        insidePopover=true;
    });
    $('.popover').on('mouseleave', function() {
        insidePopover=false;
        $(tr).popover('hide');
    });
}

$('table').on('mouseenter', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) {
            $(tr).popover('show');
            attachEvents(tr);
        }
    }, 200);
});

$('table').on('mouseleave', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) $(tr).popover('hide');  
    }, 200);
});

nice. When i hover a tr when a popover already opened, popovers won't work again

It must be something else. Try the jsfiddle. The popovers are not destroyed, manipulated or anything else.

i tried the jsfiddle. Maybe insidePopover stays true unexpected in some cases

Which browser? Have just now tested in Chrome, FireFox, Safari and IE. It works in Chrome, FireFox and Safari, but the table messes completely up in IE. This is not caused by the script above, though - does the same in @Jesper Rnn-Jensens fiddle also. Guess it is yet another IE-compatibility issue.

javascript - Bootstrap popovers for table row hover: Not possible to c...

javascript twitter-bootstrap popover
Rectangle 27 10

I used the trigger set to hover and gave the container set to the #element and finally adding a placement of the box to right.

This should be your setup:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});
#example
position:relative;

hmm that works, can I use jquery ajax in content option, to take the content from server side..will that work or i need to do some extra work for that

@vikasdevde yes you can use ajax in the content but you need to setup up for that to work... please mark the answer right if it solved your OP.. so others can benefit

but if we use the link itself as a container then the whole popover becomes a link....try it

None of the jsfiddle's work for me. Chrome Mar 20 2014.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 10

I used the trigger set to hover and gave the container set to the #element and finally adding a placement of the box to right.

This should be your setup:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});
#example
position:relative;

hmm that works, can I use jquery ajax in content option, to take the content from server side..will that work or i need to do some extra work for that

@vikasdevde yes you can use ajax in the content but you need to setup up for that to work... please mark the answer right if it solved your OP.. so others can benefit

but if we use the link itself as a container then the whole popover becomes a link....try it

None of the jsfiddle's work for me. Chrome Mar 20 2014.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 3

As you can see, the popover have class name popover-content, you can check if the mouse event's target is popup and then return to keep the popover open.

With this approach, the popover will close when you hover on your link in the popover. So, we have to ass extra condition to check for a tag too to keep it open when you are hovering on popup links.

if (e.target.className == 'popover-content' || e.target.tagName.toLowerCase() === 'a') {
    return;
}

twitter bootstrap - Detecting mouse hover over a popover from openlaye...

twitter-bootstrap popover openlayers-3 onhover