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

How to make Bootstrap 3 tooltip follow mouse?

提问by Steven

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

我的网站上有一个链接列表，这些链接在 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>

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.

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

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.

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

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

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

Anyone know how I can do this?

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

回答by davidkonrad

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.

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

An image :

一个图像 ：

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

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

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

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

Set the proxy elements positionto absoluteso it can be moved around anywhere :

设置代理服务器的元素position来absolute，因此它可以在任何地方搬来搬去：

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

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

---

---

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

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

回答by Faizan Anwer Ali Rupani

enhanced davickon answer for multiple images

多个图像的增强 davickon 答案

$(".img").on('mousemove', function(e) {

  $("#" + $(this).attr("TooltipId")).css({
    top: e.pageY,
    left: e.pageX
  });

  $("#" + $(this).attr("TooltipId")).tooltip('show');
  $(".tooltip-inner").css({
    "background-color": $(this).attr("TooltipBackround")
  });
  var a = ($("#" + $(this).attr("TooltipId")).attr("data-placement") != "") ? $("#" + $(this).attr("TooltipId")).attr("data-placement") : "top";
  $(".tooltip-arrow").css("border-" + a + "-color", $(this).attr("TooltipBackround"));
})

$(".img").on('mouseleave', function(e) {
  $("#" + $(this).attr("TooltipId")).tooltip('hide')
})

.img-tooltip {
  position: absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>header</h1>
<img class="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" TooltipBackround="green" TooltipId="img-tooltip1" />
<i id="img-tooltip1" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Tooltip for image <h1>Faizan</h1>" data-animation="false" data-trigger="manual"></i>

<br>
<br>
<br>
<br>
<img class="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" TooltipBackround="blue" TooltipId="img-tooltip2" />
<i id="img-tooltip2" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" data-animation="false" data-trigger="manual" title="Tooltip for image <h1>Faizan Anwer</h1>"></i>

回答by Manuj Garg

I was working with angularjs and facing a similar problem. There is no in built functionality in bootstrap for this. I also tried using a proxy element. But, it was causing a lot of problems. For eg. I was not able to click on element below the proxy element. I found one workaround. It is hacky and unsuggested.

我正在使用 angularjs 并面临类似的问题。bootstrap 中没有为此内置功能。我也尝试使用代理元素。但是，这导致了很多问题。例如。我无法单击代理元素下方的元素。我找到了一种解决方法。这是hacky和未经建议的。

You can get a DOM element in your browser console on creating a tooltip by setting tooltip attribute of the element, on which you want to see tooltip. I copied that DOM element and pasted it in my html, exactly where it was in DOM and removed the previously used tooltip attribute. It worked for me and gave me much more flexibility with the tooltip. You would have to remove some attributes and do some other minor changes.

您可以通过设置要在其上查看工具提示的元素的 tooltip 属性，在创建工具提示时在浏览器控制台中获取 DOM 元素。我复制了那个 DOM 元素并将它粘贴到我的 html 中，正是它在 DOM 中的位置，并删除了以前使用的工具提示属性。它对我有用，并且工具提示给了我更大的灵活性。您将不得不删除一些属性并进行一些其他小的更改。

回答by Larhanya

Using Faizan's code and responding to T3db0t's concerns about flickering, I found that sticking in a non-breaking space, adding visibility: hidden to the css, and closing the proxy element tag reduced the flickering.

使用 Faizan 的代码并回应 T3db0t 对闪烁的担忧，我发现坚持在一个不间断的空间中，添加可见性：隐藏到 css，并关闭代理元素标签减少了闪烁。

Basically speaking:

基本上来说：

<i>&#160;</i>

With css:

使用 CSS：

.area-tooltip {
  position: absolute;
  visibility: hidden;
}

See my pen: https://codepen.io/Larhanya/pen/VMjZBz(code tweaked for an image map since that's what I needed)

看我的笔：https: //codepen.io/Larhanya/pen/VMjZBz（为图像映射调整了代码，因为这是我需要的）

Truncated HTML from the pen:

从笔中截断的 HTML：

    <img src="http://lorempixel.com/output/food-q-c-350-350-5.jpg" usemap="#foodmap">
    <map id="#foodmap" name="foodmap">
      <area class="area" shape="poly" coords="78,133,158,182,162,349,0,349,0,283" href="#" target="_self" style="outline:none;" TooltipBackround="black" TooltipId="area-tooltip4" />
      <i id="area-tooltip4" class="area-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Pepper" data-animation="false" data-trigger="manual">&#160;</i>
    </map>

回答by Adam Kramer

Bind the "mousemove" event listener to the document. Capture the e.pageX, e.pageY movement of the mouse and set the "displayed" tooltip position to where the mouse is. (Requires jQuery)

将“mousemove”事件侦听器绑定到文档。捕获鼠标的 e.pageX、e.pageY 移动并将“显示”工具提示位置设置为鼠标所在的位置。（需要 jQuery）

    $(document).on('mousemove', function (e) {
        if( $('div.tooltip').css('display') !== 'hidden' ) {
            var toolHalfHeight = $('div.tooltip').outerHeight() / 2;
            $('div.tooltip').css('left', e.pageX).css('top', e.pageY - toolHalfHeight);
        }
    });