jQuery的工具提示跟随鼠标 [英] jQuery tooltip follow mouse

问题描述

我一直在使用这个脚本
http://jqueryfordesigners.com/coda -popup-bubbles /

并尝试使用此修复程序根据用户的鼠标位于页面上的位置来定位气泡：

  $（[trigger.get（0），info.get（0）]）。mouseover（function（e）{
 if （hideDelayTimer）clearTimeout（hideDelayTimer）; 
 if（beingShown || shown）{
 //不再触发动画
 return; 
} else {
 
 //重置信息框的位置
 beingShown = true; 
 info.css（{
 top：e.pageY，$ b $ left：e.pageX，
 display：'block'
}）。animate（{
 top：' -  ='+ distance +'px'，
 opacity：1 
}，time，' swing'，function（）{
 beingShown = false; 
 shown = true; 
}）; 
} 
  

而不是泡泡出现在鼠标的e.pageY和e.pageX的位置，它会在触发器的位置之外添加这些值，因为气泡完全位于相对触发器内部。

在显示泡泡后，您需要设置一些功能。

如何保持泡泡在鼠标所在的位置？

说超时根据鼠标位置更新气泡位置。

函数：

 函数UpdatePosition（）{
 $（ID_OF_BUBBLE）.css（{left：x +px，top：y +px}） ; 
 setTimeout（UpdatePosition（），100）; 
} 
  

您可以在此处插入：

  if（beingShown || shown）{
 // SETUP超时到更新气泡位置的函数
 setTimeout（UpdatePosition（），100 ）; 
 return; 
  

添加鼠标移动钩子以获取位置：

  $（document）.ready（function（）{
 $（）。mousemove（function（e）{
x = e.pageX; 
y = e.pageY; 
}）; 
 ....... 
}）; 
  

PS： - 您可能需要调整气泡的位置模式

I've been using this script http://jqueryfordesigners.com/coda-popup-bubbles/

and trying to use this fix to position the bubble according to where the user's mouse is on the page:

$([trigger.get(0), info.get(0)]).mouseover(function (e) {
  if (hideDelayTimer) clearTimeout(hideDelayTimer);
  if (beingShown || shown) {
    // don't trigger the animation again
    return;
  } else {

   // reset position of info box
    beingShown = true;
    info.css({
      top: e.pageY,
      left: e.pageX,
      display: 'block'
    }).animate({
      top: '-=' + distance + 'px',
      opacity: 1
    }, time, 'swing', function() {
      beingShown = false;
      shown = true;
    });
}

Instead of the bubble appearing where the e.pageY and e.pageX of the mouse is, it adds those values in addition to where the trigger is, because the bubble is positioned absolutely inside the relative trigger.

How can I keep the bubble where the mouse is?

解决方案

after the bubble is shown you need to set some function say timeout to update the bubble position according to mouse position.

function:

var x,y;//to track mouse positon
function UpdatePosition(){      
   $(ID_OF_BUBBLE).css({left:x+"px",top:y+"px"});         
   setTimeout("UpdatePosition()",100);
}

you may insert it here:

if (beingShown || shown) {
 //SETUP timeout to a function which updates bubble's position
 setTimeout("UpdatePosition()",100);
return;

add mouse move hook to get position:

$(document).ready(function(){
    $().mousemove(function(e){
    x=e.pageX ;
    y=e.pageY;
    });
   .......
});

PS:- you may have to tweak position mode of the bubble

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