如何使工具提示跟随光标

时间:2017-03-14 16:16:58

标签: jquery tooltip qtip

如何获得跟随光标的工具提示。我的工具提示显示在右下角。只是它的一部分:

image

以下是代码:

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

1 个答案:

答案 0 :(得分:3)

我对qtip作为一个库一无所知,但首先我要检查他们是否有任何选项可以传入以实现此行为。即使他们这样做,也很好知道事情是如何运作的!

要手动执行此操作,您需要使用CSS来提供工具提示元素=(NETWORKDAYS.INTL(U2,V2,11,'Working Hours & Holidays'!$C$2)-1)*("17:00"-"8:30")+IF(NETWORKDAYS.INTL(V2,V2,11,'Working Hours & Holidays'!$C$2),MEDIAN(MOD(U2,1),"8:30","17:00"),"17:00")-MEDIAN(NETWORKDAYS.INTL(V2,V2,11,'Working Hours & Holidays'!$C$2)*MOD(U2,1),"8:30","17:00") ,然后使用javascript获取鼠标的position: fixed;x坐标,更新{{每次鼠标移动时都会有1}}和y CSS属性。

这是一个例子!

left
top
$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
  $( ".tooltip" ).css({
    "left" : event.pageX,
    "top" : event.pageY
  });
});