如何使工具提示跟随光标

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和topCSS 属性。

这是一个例子！

$( 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>