如何让Bootstrap 3工具提示跟随鼠标？

我的网站上有一个链接列表,它们在Bootstrap工具提示中显示图像

Item 1
Item 2
Item 3

这只是在所有链接的右侧显示工具提示.虽然图像是静态的,但我希望当用户移动鼠标时,工具提示图像会移动.

您可以在此站点上看到我想要做的示例:http://www.hearthpwn.com/decks/381677-druidereno.在右侧边栏上,有一个可以悬停的卡片列表,工具提示图像跟随鼠标移动.看起来他们不使用Bootstrap,我只是想模仿功能.

我在Bootstrap功能中没有看到任何操作:http://getbootstrap.com/javascript/#tooltips

谁知道我怎么做到这一点？

你不能在bootstrap中本地执行此操作.但您可以通过使用"代理元素"轻松模仿行为.诀窍是将图像工具提示附加到第二个元素,然后在图像内移动鼠标光标时根据鼠标位置更新元素位置.

一个图像 :

#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')
})