如何在没有插件的情况下使用jquery创建工具提示?

时间:2009-08-10 12:24:13

标签: jquery css

多年来我使用了一些不同的工具提示插件,但我认为现在是编写自己的插件的时候了。简单地说,我不是在寻找一个拥有所有选项的插件,因为我知道我希望每个工具提示都能弹出来看起来和行为。大多数插件都有一系列动画和位置可供使用,我认为这对于我想要创建的轻量级插件来说太过分了,当然有你的帮助:)

基本上,使用悬停的title属性,我希望工具提示直接显示在正在悬停的元素上方并居中。

我知道如何填充将要显示的div,但是我想要解决的是如何告诉div将自己定位在元素的正上方。

理想情况下,这是用最少的代码完成的。我的逻辑说的是这样的(伪代码):

<html>
<head>

<style type="text/css">

    #myToolTip { display: none; }

</style>

<script type="text/javascript">

$(document).ready(function() {

    $('.hoverAble').hover(function(){

        var tip = $(this).attr('title');

        $('#myToolTip').html(tip).fadeIn();

    }, function() {

        $('#myToolTip').fadeOut();

    }

});
</script>
</head>
<body>

<div id="myToolTip"></div>

<div class="hoverAble" title="I am good at code"></div>

</body>
</html>

当然上面的代码只是填充工具提示而不是相对于悬停元素定位。那是我的理解不足的地方。你能帮忙吗?

编辑:为了澄清,我不想让工具提示随鼠标移动。

5 个答案:

答案 0 :(得分:5)

查看jQuery中的各种CSS functions,主要是offset(),也许是height()

// pseudocode, assuming #tooltip has position: absolute
// do something similar with the left offset as well
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

这会将工具提示静态地放在链接上或接近链接,我认为这是您正在寻找的。如果您希望工具提示随鼠标移动,则需要动态更新mousemove事件中的位置。

答案 1 :(得分:3)

<div title="This is tooltip">Hover Me</div>

这个简单的工具提示对我有用。你可以添加任何课程,使其时尚。

答案 2 :(得分:1)

如果没有特定的代码示例,您可以查看事件对象的内容(我假设您在onmouseover事件中执行此操作)。

您的clientX和clientY属性应该有帮助

查看以下事件对象:

http://www.javascriptkit.com/jsref/event.shtml

答案 3 :(得分:1)

我认为这可能对你有所帮助。

<html>
<head>
<style type="text/css">
    #myToolTip { display: none;position:absolute; }
</style>
<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.hoverAble').hover(function(e){
        var left = mouseX(e);
        var top  = mouseY(e);
         var tip  = $(this).attr('title');

        $('#myToolTip').css('top',top);
        $('#myToolTip').css('left',left);
        $('#myToolTip').html(tip).fadeIn();


    }, function() {

        $('#myToolTip').fadeOut();

    })

});

鼠标位置:

function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}

function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY + (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}
</script>
</head>

HTML:

<body>

<div id="myToolTip"></div>

<div class="hoverAble" title="I am good at code">hi catch me</div>

</body>
</html>

答案 4 :(得分:0)

最容易使用内置的jQuery.UI工具提示之一。

$(document).tooltip();

在html中,所有“标题”标签都转向工具提示...

<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>