Question

我正在使用带有图像映射的jQuery Tooltipster工具提示，但却无法使其正常运行。弹出工具提示，但在浏览器的左上角。使用javascript文件中的“offset”选项会移动它，但我不认为这是最好的选择。将此插件与图像上的图像映射/区域坐标一起使用的正确方法是什么？

以下是我正在使用的内容，将鼠标悬停在最左边的橙色或绿色圆圈上，看看我在说什么：http://willryan.us/test/#anatomyBox

Answer 1

我对这种情况的解决方法是在插件中添加一个选项来检测鼠标（指针）位置，并使工具提示出现在它附近。我调用了选项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;
};

在计算地图区域的reposition: function()内进行第三次插入，目的是通过检查nearPointer选项布尔值来绕过它们。查找下一行并添加此代码& !self.options.nearPointer
```
if (self.$elProxy.is('area') & !self.options.nearPointer) {
```

在第870行附近的此评论// our function and global vars for positioning our tooltip之前进行最终插入。

//  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;
};

在图像映射上更改Tooltipster工具提示的位置

1 个答案: