如何让Bootstrap 3工具提示跟随鼠标？ [英] How to make Bootstrap 3 tooltip follow mouse?

问题描述

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

I have a list of links on my site that are showing images in a Bootstrap tooltip

<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>

这只是提出了所有链接右侧的工具提示。图像是静态的，我希望当用户移动鼠标时，工具提示图像会移动。

This just brings up the tooltip to the right of all the links. The images are static though, I'd like the tooltip image to move around as the user moves their mouse around.

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

You can see an example of what I want to do on this site: http://www.hearthpwn.com/decks/381677-druidereno. On the right sidebar, there's a list of cards you can hover over, and the tooltip images follow the mouse movement. Doesn't look like they use Bootstrap, I just want to emulate the functionality.

我在Bootstrap功能中看不到任何要做的事情： http://getbootstrap.com/javascript/#tooltips

I don't see anything to do this in the Bootstrap functionality: http://getbootstrap.com/javascript/#tooltips

任何人都知道我该怎么做？

Anyone know how I can do this?

推荐答案

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

You cannot do that natively in bootstrap. But you can easily mimick the behaviour by using a "proxy element". The trick is to attach the image tooltip to a second element and then update that elements position according to the mouse position when you move the mouse cursor around inside the image.

image：

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

代理元素，这里是< i> 标记触发器：手动：

A proxy element, here an <i> tag with trigger: manual :

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

将代理元素 position 设置为绝对所以它可以在任何地方移动：

Set the proxy elements position to absolute so it can be moved around anywhere :

#img-tooltip {
  position: absolute;
}

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

Finally update the proxys position and show the tooltip when you move the mouse cursor around inside the image :

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

demo - > http://jsfiddle.net/h2dL07ns/

demo -> http://jsfiddle.net/h2dL07ns/

更新演示 - > http://jsfiddle.net/h2dL07ns/324/ 使用@ Marks的指针 - 事件：无; 建议。它消除了偶尔的闪烁。

Updated demo -> http://jsfiddle.net/h2dL07ns/324/ using @Marks's pointer-events: none; suggestion. It removes any occasional flickering.

这篇关于如何让Bootstrap 3工具提示跟随鼠标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！