jquery - Bootstrap Popover 和图像映射

Question

http://jsfiddle.net/YsEqb/25/

将鼠标悬停在他的眼睛上。他荣耀的眼睛。

我在这里要做的是让弹出窗口的东西出现在他的眼睛上方，而不是图片本身上方。非常简单的问题，但我很难解决它。我知道这个插件通常不应该用在图像映射中，但它是我现在唯一需要使用的东西。这似乎是我应该能够捏造的东西。那么，Stackoverflow，你能帮我解决问题吗？

这是一个占位符图像，真正的代码将在页面中使用，根据用户的操作，图像可能位于不同的位置。并且会有不止一个调用同一张 map 。所以它必须出现在调用 map 的特定图像上。

谢谢大家。

{没有任何代码我无法提交。这是我正在使用的 javascript。

       $(document).ready(function() {
     $('#eye').popover({
        placement : 'top'
    });
  $('#eye2').popover({
        placement : 'top'
    });
});

Answer 1

对于那些感兴趣的人，这是我解决这个问题的方法。

我决定放弃区域 map ，转而采用更复杂的解决方案。创建了一个链接标签，其中包含弹出弹出窗口的所有元素，并将其显示为内联 block 。相对于它所在的容器绝对定位它。然后将它定位在眼睛所在的位置。没有圆圈，但不可见的正方形也同样有效。谁会注意到，是吗？它的重复编码比我喜欢的要多得多，但它有效并且不会降低页面速度太多。