如何使工具提示跟随光标

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>

如何使工具提示跟随光标

how to make tooltip follow cursor

jquery

tooltip

qtip