如何让popover出现在我的鼠标进入hover目标的位置？

这是一个示例代码，用于显示我的按钮下方的弹出窗口显示：

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

现在我希望弹出窗口出现在光标移动的位置（不仅是顶部/底部/左/右，而是一个特定的位置，取决于用户将光标放在何处）。

怎么弄呢？

Answer 1

在bootstrap-tooltip.js中，替换（在第72行左右）

  , enter: function (e) { 

同

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

并替换（约144行）

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

同

  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 

然后像这样调用你的popover：

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

这是一个快速肮脏的方式（黑客核心文件），但它的工作原理。 也许其他人有一个更好的方法。 请注意，弹出指针需要一些工作，因为它不会出现。

此示例在Bootstrap 2.0.3中进行了测试，但代码在2.2.2中显示类似。

Answer 2

对于bootstrap 3.xx

1.将属性atMouse：false添加到内联类Tooltip.DEFAULTS {}。

 Tooltip.DEFAULTS = { animation: true, placement: 'top', selector: false, template: '
', trigger: 'hover focus', title: '', delay: 0, html: false, container: false, atMouse: false, viewport: { selector: 'body', padding: 0 } } 

2.转到方法“Tooltip.prototype.enter”中的第1368行并更改以下代码：

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

至：

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

3.在“Tooltip.prototype.show”方法的内部添加以下代码：

 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.在代码后面的Tooltip.prototype.getCalculatedOffset方法的主体中：

 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工具提示/ popover这样的事情：

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

为我工作。