如何讓彈出窗口出現在我的鼠標進入懸停目標的位置？

這是一個示例代碼，以顯示我下面的按鈕酥料餅的窗口顯示：如何讓彈出窗口出現在我的鼠標進入懸停目標的位置？

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

現在我想的酥料餅的窗口出現在地方，我的光標移動（不僅是上/下/左/右，但具體位置取決於用戶將光標放在哪裏）。

如何得到它？

來源

2013-02-07 user2049259

[Twitter Bootstrap Popover - DOM插入位置]（http：// stackoverflow。com/questions/13369306/twitter-bootstrap-popover-dom-insertion-location） – glomad

ithcy，這個問題是關於代碼結構的問題。這一個是關於元素在瀏覽器中的位置。 – isherwood

在自舉-tooltip.js，與

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

替換（在約線72）

 , enter: function (e) {

並用

替換（在約線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

然後打電話給你的酥料餅是這樣的：

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

這是一個快速正骯髒的方式去了解它（黑客核心文件），但它的作品。也許別人有更好的方法。請注意，彈出指針需要一些工作，因爲它不會出現。

本示例已在Bootstrap 2.0.3中進行了測試，但代碼在2.2.2中顯示類似。

來源

2013-02-07 21:29:18 isherwood

真的非常感謝！ – user2049259

對於引導3.x.x

1.增加屬性atMouse：假於一字形類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.轉到行1368內的方法「Tooltip.prototype.enter」，改變下面的代碼：

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.Inside方法「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.Prepend到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工具提示/酥料餅的是這樣的：

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

爲我工作。

來源

2015-08-14 09:37:02

這在Bootstrap v3.3.5上完美運行 – Raitei

如何讓彈出窗口出現在我的鼠標進入懸停目標的位置？

回答

相關問題