How to make a popover appear where my mouse hits the target?

Question

This is a sample code to display the swap window under my button:

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'bottom', content: '' 

Now I want the popover window to appear at the place where the cursor moves (not only the top / bottom / left / right, but the specific place, which depends on where the user hovered over).

How to get it?

Answer 1

In bootstrap-tooltip.js replace (near line 72)

  , enter: function (e) { 

from

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

and replace (approximately on line 144)

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

from

  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 as follows:

 $('.pop').popover({'placement': 'mouse'}); 

This is a quick n-dirty way to do this (hack core files), but it works. Maybe someone has a better method. Note that the popover pointer will need some work, as it does not appear.

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

Answer 2

For bootstrap 3.xx

1. Add the atMouse: false attribute to the built-in 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. Return to line 1368 inside the "Tooltip.prototype.enter" method and change the following code:

 if (obj instanceof $.Event) { self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true } 

in

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

3. In addition to the "Tooltip.prototype.show" method, add the 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. We support the body of the Tooltip.prototype.getCalculatedOffset method of the 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.