獲取鼠標左側的工具提示

Question

我試圖在我的網站上實現一個簡單的工具提示。它工作正常，顯示光標右側的工具提示，但現在我試圖獲得只位於光標左側的相同效果。我如何實現這一目標？

這裏是我的代碼： http://jsfiddle.net/3r5aq/

可能是一個新手的事情要問，但我似乎無法弄清楚這一個自己。

Answer 1

可以計算工具提示的寬度。顯然，如果你在頁面上有多個，你將需要更新選擇器。

.mousemove(function(e) { 
      var mousex = e.pageX - 5 - $(".tooltip").width(); //Get X coordinates 
      var mousey = e.pageY;  //Get Y coordinates 
      $('.tooltip') 
      .css({ top: mousey, left: mousex}) 
    }); 

http://jsfiddle.net/3r5aq/18/

Answer 2

你可以改變它去左只需根據提示的大小修改x值：

var mousex = e.pageX - $('.tooltip').width() - 20; 

Answer 3

我會用以下內容：

var mousex; 
var left = e.pageX - $('.tooltip').width() - 20; 
if(left > 0)    
    mousex = left; 
else 
    mousex = 0; 

這種方式，提示不向外如果鏈路太遠留在網頁上運行的可視面積。

DEMO

Answer 4

$(document).ready(function() { 
     // Tooltip only Text 
     $('.nextTooltip').hover(function(){ 
       // Hover over code 
       var title = $(this).attr('title'); 
       $(this).data('tipText', title).removeAttr('title'); 
       $('<p class="tooltip"></p>') 
       .text(title) 
       .appendTo('body') 
       .fadeIn('fast'); 
     }, function() { 
       // Hover out code 
       $(this).attr('title', $(this).data('tipText')); 
       $('.tooltip').remove(); 
     }).mousemove(function(e) { 
       var mousex = e.pageX;  //Get X coordinates 
       var mousey = e.pageY;  //Get Y coordinates 
       $('.tooltip').each(function(ix, item) { 
        $(item).css({ 
         top: mousey, 
         left: mousex - $(item).width() - 20 
        }); 
       }); 
     }); 
});​