jquery - 如何使工具提示跟随光标

Question

如何获取跟随光标的工具提示。我的工具提示出现在右下角。仅出现其中的一部分:

代码如下:

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

Answer 1

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