Question

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

$.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.x.x

1.将属性 atMouse：false 添加到内联类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.转到方法＆＃34; Tooltip.prototype.enter＆＃34;中的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.方法的内部＆＃34; Tooltip.prototype.show＆＃34;添加以下代码：

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 tooltip / popover是这样的：

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

为我工作。

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

2 个答案: