How to make popover appear where my mouse enters the hover target?
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}
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.
Solution 2
For bootstrap 3.x.x
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 } }
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']} }
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)
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} }
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.
user2049259
Updated on July 28, 2022Comments
-
user2049259 almost 2 years
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?