How to make popover appear where my mouse enters the hover target?

Question

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 want the popover window appear on the place where my cursor moves on(not only top/bottom/left/right, but a specific location which depends on where user put their cursor on).

How to get it?

Swamper

possible duplicate of Twitter Bootstrap Popover - DOM Insertion Location – Albuminuria

ithcy, that question is asking about code structure. This one is about element placement in the browser. – Plication

Answer 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}
        break
      case '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.

Plication

Answer 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'] = 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'];
   }
   

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

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.

Meldameldoh