javascript - 如何使 Bootstrap 3 工具提示跟随鼠标？

Question

我的网站上有一个链接列表，这些链接在 Bootstrap 工具提示中显示图像

<a data-html="true" data-toggle="tooltip" title="<img src='1.png' />">Item 1</a>
<a data-html="true" data-toggle="tooltip" title="<img src='2.png' />">Item 2</a>
<a data-html="true" data-toggle="tooltip" title="<img src='3.png' />">Item 3</a>

<script type="text/javascript" language="javascript">

    $(document).ready(function () {
        $('a').tooltip({
            placement: "right"
        })
    }

</script>

这只会在所有链接的右侧显示工具提示。虽然图像是静态的，但我希望工具提示图像随着用户四处移动鼠标而四处移动。

你可以在这个网站上看到我想做的事的例子:http://www.hearthpwn.com/decks/381677-druidereno .在右侧边栏上，有一个卡片列表，您可以将鼠标悬停在上面，工具提示图像会跟随鼠标移动。看起来他们没有使用 Bootstrap，我只是想模拟功能。

我在 Bootstrap 功能中看不到任何可执行此操作的内容:http://getbootstrap.com/javascript/#tooltips

有人知道我该怎么做吗？

Answer 1

您不能在 Bootstrap 中以 native 方式执行此操作。但是您可以通过使用“代理元素”轻松地模仿这种行为。诀窍是将图像工具提示附加到第二个元素，然后当您在图像内移动鼠标光标时根据鼠标位置更新该元素的位置。

一张图片:

<img id="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" />

一个代理元素，这里是一个<i>用 trigger: manual 标记:

<i id="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip for image" data-animation="false" data-trigger="manual"/>

设置代理元素position至 absolute所以它可以在任何地方移动:

#img-tooltip {
  position: absolute;
}

最后更新代理位置并在图像内移动鼠标光标时显示工具提示:

$("#img").on('mousemove', function(e) {
  $("#img-tooltip").css({top: e.pageY, left: e.pageX });
  $('[data-toggle="tooltip"]').tooltip('show')
})
$("#img").on('mouseleave', function(e) {
    $('[data-toggle="tooltip"]').tooltip('hide')
})

演示 -> http://jsfiddle.net/h2dL07ns/

---

更新演示 -> http://jsfiddle.net/h2dL07ns/324/ 使用@Marks 的 pointer-events: none;建议。它消除了任何偶尔的闪烁。