jquery - 更改 Tooltipster 工具提示在图像地图上的位置

Question

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

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

Answer 1

对于这种情况，我的解决方法是在插件中添加一个选项来检测鼠标（指针）位置并使工具提示出现在它附近。我调用了该选项nearPointer并将其默认设置为false.

这些是我添加到 beta V4 版本的行v4.0.0rc5

1. 第一次插入是tooltipster在主脚本中定义时设置的选项。

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

2. 第二次插入是通过捕获鼠标移动事件并存储坐标来获取鼠标位置的代码。您可以在上面的默认选项之后立即插入它。 我必须提到这个片段最初不是我的，但我不记得我是从网络的哪个角落得到它的；所以我向创作者道歉，因为我没有给予信任。

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

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

   if (self.$elProxy.is('area') & !self.options.nearPointer) {
   

4. 最后插入// 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;
   };