jQuery的工具提示/移動鼠標移動/提示用鼠標位置

Question

的jQuery Tools tooltip是OK的我！

但我想它用鼠標移動（相對於鼠標位置提示）移動。我怎樣才能做到這一點？或者是否有這種方式的其他插件？

Answer 1

我不認爲這是可能與jQuery的工具提示插件做。

的Bassistance Tooltip plugin不支持你想要什麼。使用track: true，如this demo：

$('#yahoo a').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    showBody: " - ", 
    fade: 250 
}); 

---

如果你不喜歡這樣的插件，qTip2也支持鼠標跟蹤。見this demo（相當於jsFiddle here）。

$('#demo-mouse').qtip({ 
    content: 'I position myself at the current mouse position', 
    position: { 
     my: 'top left', 
     target: 'mouse', 
     viewport: $(window), // Keep it on-screen at all times if possible 
     adjust: { 
      x: 10, y: 10 
     } 
    }, 
    hide: { 
     fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking! 
    }, 
    style: 'ui-tooltip-shadow' 
}); 

Answer 2

我這樣做與jQuery工具提示

$('#selector').mousemove(function(e) { 
    $('.tooltip').css('left', e.pageX + 5).css('top', e.pageY - 25).css('display', 'block'); 
}) 

其中.tooltip是CSS類

Answer 3

jQuery用戶界面現在包括一個.tooltip() widget作爲1.9版本，它現在提供的選項track: true使工具提示跟隨鼠標。只是初始化窗口小部件時指定它作爲一個選項：

$(document).tooltip({ 
    track: true 
}); 

這裏看到這個動作：http://jqueryui.com/tooltip/#tracking

此，如果您已經使用jQuery UI，並且不希望包括其他圖書館是非常有用的。退房的API爲更多細節這個小工具：http://api.jqueryui.com/tooltip/

Answer 4

HTML

<div id="tooltipWindow" class="tooltipContainer"> 
    <div></div> 
</div> 

CSS（只要你想添加的樣式，在下面的腳本我還加附元素的類到工具提示div）

<style> 
    .tooltipContainer { 
     position: fixed; 
     height: auto; 
     width: auto; 
     background: ghostwhite; 
     padding: 10px; 
    } 
</style> 

JAVASCRIPT（jQuery的，不要忘了包括jQuery庫，我已經加入了包括標籤以及）

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script> 
<script> 
    //Following Tooltip 
    $('.elementClassName').mousemove(function(e) { 
     if ($(this).attr('title') != "") { 
      $('#tooltipWindow div').html($(this).attr('title')); 
      $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class')); 
      $('#tooltipWindow').show(); 
     } 
    }); 
    $('.elementClassName').mouseleave(function (e) { 
     $('#tooltipWindow').hide(); 
     }); 
    } 

    //Non Following Tooltip 
    $('.elementClassName').hover(function(e) { 
     if ($(this).attr('title') != "") { 
      $('#tooltipWindow div').html($(this).attr('title')); 
      $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class')); 
      $('#tooltipWindow').show(); 
     } 
    },function (e) { 
     $('#tooltipWindow').hide(); 
     }); 
    } 

</script> 

Answer 5

$(function(){ window.onmousemove = function (e) { var tooltips = $('div.ui-tooltip'); var x = (e.clientX + 10) + 'px', y = (e.clientY + 10) + 'px'; for (var i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } }; });

如果使用jQuery的UI提示，該代碼片段會做的伎倆！