如何使Bootstrap 3工具提示跟随鼠标
How to make Bootstrap 3 tooltip follow mouse?
我的网站上有一个链接列表,这些链接在引导工具提示中显示图像
<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
有人知道我该怎么做吗?
您不能在引导程序中以本机方式执行此操作。但是,通过使用"代理元素",您可以很容易地模仿这种行为。诀窍是将图像工具提示附加到第二个元素,然后在图像内移动鼠标光标时根据鼠标位置更新该元素的位置。
图像:
<img id="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" />
代理元素,这里是带有trigger: manual
:的<i>
标签
<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;
建议。它消除了任何偶尔的闪烁。
针对多个图像的增强型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>
将"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);
}
});
我使用angularjs时遇到了类似的问题。引导程序中没有内置的功能。我还尝试使用代理元素。但是,它造成了很多问题。例如,我无法点击代理元素下面的元素。我找到了一个变通办法。它既粗鲁又不做作。
在创建工具提示时,您可以在浏览器控制台中获取DOM元素,方法是设置要在其上查看工具提示的元素的工具提示属性。我复制了那个DOM元素并将其粘贴到我的html中,正好位于它在DOM中的位置,并删除了以前使用的工具提示属性。它对我很有效,并在工具提示方面给了我更多的灵活性。您将不得不删除一些属性并进行一些其他小的更改。
使用Faizan的代码并响应T3db0t对闪烁的担忧,我发现坚持在一个不间断的空间中,添加可见性:隐藏到css,并关闭proxy元素标记可以减少闪烁。
基本来说:
<i> </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"> </i>
</map>
我在这里没有找到任何适用于Bootstrap 4的答案。这是我的解决方案:
document.querySelectorAll('[data-toggle="tooltip"]').forEach(function (tooltipElement) {
tooltipElement.addEventListener('mousemove', function (MouseEvent) {
const tooltip = document.querySelector('.tooltip');
if (tooltip)
{
tooltip.style.transform = 'none';
tooltip.style.top = MouseEvent.clientY + 10 + 'px';
tooltip.style.left = MouseEvent.clientX + 10 + 'px';
}
});
});
首先,我们得到每个具有工具提示的元素。然后,我们为mousemove的每个元素添加一个事件侦听器。使用鼠标事件,我们可以重复重写顶部&left样式以随光标移动工具提示。
我们删除了转换样式,因为这些样式可以将工具提示从光标上移开。
如果你想防止你的工具提示溢出屏幕右侧,你可以修改上面功能的末尾,如下所示:
if (tooltip)
{
tooltip.style.transform = 'none';
tooltip.style.top = MouseEvent.clientY + 10 + 'px';
tooltip.style.left = MouseEvent.clientX + 10 + 'px';
//if mouseevent is within 100px of the right edge of the screen
if (MouseEvent.clientX > window.innerWidth - 100)
{
//move the tooltip to the left of the mouse
tooltip.style.transform = 'translateX(-100%)';
}
}
- 网站跟随鼠标滚动
- 三.js - 对象跟随鼠标位置
- HTML 中跟随鼠标的动画图像蒙版
- HTML5 画布跟随鼠标效果 jquery
- D3:跟随鼠标坐标
- Div 跟随鼠标并避免浏览器边界
- Javascript html 编辑器光标焦点跟随鼠标
- 在javascript中使box边缘跟随鼠标指针
- 为什么当对象跟随鼠标时javascript会出现滞后
- 如何使Bootstrap 3工具提示跟随鼠标
- 如何在开始拖动任何对象时使iframe跟随鼠标光标
- DIV捕捉到网格并跟随鼠标
- 任何让文本区域跟随鼠标的方法
- 努力使一个对象总是跟随鼠标在box2dweb
- 图像跟随鼠标指针和淡出
- 在AngularJS中跟随鼠标的弹出对话框
- 如何让jQuery鼠标悬停工具提示跟随鼠标指针?
- 使动态图像跟随鼠标
- 如何跟随鼠标反向移动
- 有没有办法让 css3 类跟随鼠标光标