如何获取跟随光标的工具提示。我的工具提示出现在右下角。仅出现其中的一部分:
代码如下:
$(document).ready(function(e)
{
// By suppling no content attribute, the library uses each elements title attribute by default
$('#visualization').qtip({
// Simply use an HTML img tag within the HTML string
content: 'i am a qtip'
});
});
最佳答案
我对 qtip 作为库一无所知,但首先我会检查它们是否有任何选项可以传入以实现此行为。即使他们这样做了,了解事情如何运作还是很好的!
要手动执行此操作,您需要使用 CSS 为工具提示元素指定 position:fixed;
,然后使用 javascript 获取 x
和 y
鼠标坐标,每次鼠标移动时更新 left
和 top
CSS 属性。
这是一个例子!
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
$( ".tooltip" ).css({
"left" : event.pageX,
"top" : event.pageY
});
});
.tooltip {
display: inline-block;
position: fixed;
padding: .5em 1em;
background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4 id="log">pageX: -, pageY: -</h4>
<div class="tooltip">I'm a tooltip!</div>
关于jquery - 如何使工具提示跟随光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42791168/