显示一个div作为一个tootip

我需要弄清楚一些让div能够显示为工具提示的JQuery代码，而且我不想使用JQuery UI中的任何插件。显示一个div作为一个tootip

的要求是：

该div应遵循光标
当光标悬停在div“tootip”应保持可见。

我只需要如何做到这一点的基本思路。我已经成功地展示一个div作为工具提示，但是当光标从锚标记失控消失：

<script type="text/javascript"> 
    function pageLoad() { 

     var mouseX; 
     var mouseY; 
     $(document).mousemove(function(e) { 
      mouseX = e.pageX; 
      mouseY = e.pageY; 
     }); 

     jQuery('.trigger').mouseenter(function() { 



      var width = parseInt(jQuery('#pop-up').css('width'), 10); 

      jQuery('#pop-up').css('top', mouseY); 
      jQuery('#pop-up').css('left', mouseX - width); 
      jQuery('#pop-up').fadeIn(500); 


     }).mouseleave(function() { 
      jQuery('#pop-up').fadeOut(); 
     }); 

    } 
</script>

来源

2013-05-01 Aijaz Chauhan

和问题是？你的代码在哪里？ – bipen 2013-05-01 12:50:08

[Google！]（https://www.google.nl/#output=search&sclient=psy-ab&q=javascript+tooltip） – Aquillo 2013-05-01 12:51:27

为什么要使用JQuery或像http://craigsworks.com/projects/qtip2/这样的插件 – 2013-05-01 12:52:47

试试这个：

var changeTooltipPosition = function (event) { 
    var tooltipX = event.pageX - 8; 
    var tooltipY = event.pageY + 8; 
    $('div.tooltip').css({ 
     top: tooltipY, 
     left: tooltipX 
    }); 
}; 

var showTooltip = function (event) { 
    $('div.tooltip').remove(); 
    $('<div class="tooltip">Div should follow the cursor! :)</div>') 
     .appendTo('body'); 
    changeTooltipPosition(event); 
}; 

var hideTooltip = function() { 
    $('div.tooltip').remove(); 
}; 

$("span#hint,label#username").bind({ 
    mousemove: changeTooltipPosition, 
    mouseenter: showTooltip, 
    mouseleave: hideTooltip 
});

FIDDLE（参考：mkyong）

来源

2013-05-01 12:56:49

显示一个div作为一个tootip

回答

相关问题