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中本地执行此操作。但是你可以通过使用＆＃34;代理元素＆＃34;轻松模仿行为。诀窍是将图像工具提示附加到第二个元素，然后在图像内移动鼠标光标时根据鼠标位置更新元素位置。

图片：

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

演示 - ＆gt;的 http://jsfiddle.net/h2dL07ns/

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

Answer 2

增强了多个图像的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>

Answer 3

我正在使用angularjs并面临类似的问题。在bootstrap中没有内置功能。我也尝试过使用代理元素。但是，它造成了很多问题。例如。我无法点击代理元素下面的元素。我找到了一个解决方法。这是hacky和unuggested。

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

Answer 4

使用Faizan的代码并回应T3db0t关于闪烁的问题，我发现坚持不间断的空间，增加了可见性：隐藏到css，关闭代理元素标签减少了闪烁。

基本上说：

<i>&#160;</i>

使用css：

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

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

从笔中截断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>

Answer 5

将“ 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);
        }
    });

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

5 个答案: