更改圖像地圖上Tooltipster工具提示的位置

我正在使用jQuery Tooltipster工具提示與圖像地圖，但無法完全正確地執行此操作。工具提示彈出，但在瀏覽器的左上角。在javascript文件中使用「偏移量」選項會將其移動，但我認爲這不是最好的選擇。在圖像上使用此插件與圖像地圖/區域座標的正確方法是什麼？更改圖像地圖上Tooltipster工具提示的位置

這裏就是我的工作，將鼠標懸停在最左邊的橙色或綠色圓圈，看看我說的是：http://willryan.us/test/#anatomyBox

來源

2013-01-23 Will Ryan

是否有你有任何問題使用偏移選項？這就是我會建議這樣做的。 – dev

我只是再試一次，現在當我添加offsetX和offsetY時什麼也沒有顯示（嘗試了各種尺寸）。之前，當我嘗試它會移動，但它不會總是在同一個地方（比如說，如果你滾動了一下並且在它上面盤旋）。這就是爲什麼我認爲這不是實現它的最佳方式。 –

請構建一個jsFiddle演示。但是，包含演示鏈接並不能證明您的帖子中沒有任何代碼。在鏈接失效的情況下顯示代碼也很重要。 – Sparky

我對這種情況下的解決方法是一個選項添加到插件檢測鼠標（指針）位置並使工具提示出現在其附近。我打電話給選項nearPointer並將其默認設置爲false。

這些是我加入到測試V4版本v4.0.0rc5

首先插入在主腳本定義tooltipster時設置的選項的行。

var pluginName = "tooltipster", 
defaults = { (...) 
    animation: 'fade', 
    interactiveTolerance: 350, 
    multiple: false, 
    nearPointer: false, //added by mestrini 
    offsetX: 0, 
    offsetY: 0, (...)

第二次插入是通過捕獲鼠標移動事件並存儲座標來獲取鼠標位置的代碼。您可以在默認選項之後插入。 我必須指出，這段代碼並不是我的原始代碼，但我無法回想起從哪個角落獲得它;所以我向創作者道歉，不要信任。

// code added by mestrini 
    document.onmousemove = getMousePosition; 

    function getMousePosition(e) { 
    var isIE = document.all? true:false; 
    var _x, _y; 

    if (isIE) { 
     _x = event.clientX + document.body.scrollLeft; 
     _y = event.clientY + document.body.scrollTop; 
    } else { 
     _x = e.pageX; 
     _y = e.pageY; 
    } 
    posX=_x; 
    posY=_y; 
    return true; 
};

第三插入其中地圖區域與目的計算通過檢查nearPointer選項布爾值以繞過他們reposition: function()內製成。尋找的下一行，並添加以下代碼& !self.options.nearPointer
```
if (self.$elProxy.is('area') & !self.options.nearPointer) { 
```

最終插入此評論// our function and global vars for positioning our tooltip在線路附近之前進行870

// code added by mestrini 
if (self.options.nearPointer){ 
    var paddY = 0, paddX = 0; 
    switch (self.options.position) { //moving the tooltip a bit away from the pointer 
     case 'top': 
     paddY = 3; 
     break; 
     case 'bottom': 
     paddY = -3; 
     break; 
     case 'right': 
     paddX = -3 
     break; 
     case 'left': 
     paddX = 3 
     break; 
    } 
    proxy.offset.top = posY - paddY; //giving it some padding 
    proxy.offset.left = posX - paddX; 
    proxy.dimension.width = 0; //disregarding the plugin area calculations 
    proxy.dimension.height = 0; 
};

來源

2014-10-03 15:51:38 mestrini

更改圖像地圖上Tooltipster工具提示的位置

回答

相關問題