如何使工具提示跟随光标 [英] how to make tooltip follow cursor

问题描述

如何获取工具提示以跟随光标.我的工具提示显示在右下角.只是其中的一部分:

How to get a tooltip to follow the cursor. My tooltip appears on the right bottom. Just a piece of it appears:

代码如下:

$(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作为库一无所知，但首先我要检查一下它们是否可以传递任何选项来实现此行为.即使他们这样做，也还是要知道事情如何运作！

I don't know anything about qtip as a library, but first I'd check to see if they have any options to pass in to achieve this behavior. Even if they do, it's good to know how things work anyways!

要手动执行此操作，您将使用CSS提供工具提示元素position: fixed;，然后使用javascript获取鼠标的x和y坐标，从而更新left和top CSS每次鼠标移动时都具有属性.

To do it manually, you'd use CSS to give your tooltip element position: fixed; and then use javascript to get the x and y coordinates of your mouse, updating the left and top CSS attributes every time the mouse moves.

这是一个例子！

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

这篇关于如何使工具提示跟随光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！