How To Make Popover Appear Where My Mouse Enters The Hover Target?

This is an example code to show the popover window display below my button: $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'bottom', content: '' Now I w

Solution 1:

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

     , enter: function (e) {

with

     , 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}
        breakcase'mouse':
        tp = {top: window.mousePos.y, left: window.mousePos.x}
        break

Then call your popover like this:

$('.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.

Solution 2:

For bootstrap 3.x.x

1. Add attribute atMouse:false to the inline class Tooltip.DEFAULTS{}.

   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
   }
   

   to:

   if (obj instanceof $.Event) {
     self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = trueself.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'];
   }
   

   before this line of code:

   var calculatedOffset = this.getCalculatedOffset(placement, pos,
           actualWidth, actualHeight)
   

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

   if(this.options.atMouse) {
     returnplacement=='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}
   }
   

5. Call tooltip/popover something like this:

   $("[data-toggle='popover']").popover({html:true,container:'body',atMouse:true,trigger:'hover',animation:false,placement:"top auto"});

Work for me.