如何使用jquery创建一个没有插件的工具提示？

Question

如何使用jquery创建一个没有插件的工具提示？

7

我多年来使用了几个不同的工具提示插件，但我认为现在是时候编写自己的插件了。简单地说，我不想要一个拥有所有选项的插件，因为我知道我想要每个弹出的工具提示看起来和行为如何。大多数插件都有各种动画和位置可用，我认为这对于我想要创建的轻量级工具提示来说过于冗余，当然需要您的帮助 :)

基本上，使用悬停的标题属性，我希望工具提示出现在被悬停元素的正上方并居中。

我知道如何填充将显示的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>

当然，上面的代码只是填充工具提示，而不是相对于悬停元素定位。这就是我的理解不足之处。你能帮忙吗？

编辑：仅供澄清，我不想让工具提示随鼠标移动。

- willdanceforfun

2

你的代码中有一个错误，缺少了 ready(function(){}); 的括号！ - Shiva Srikanth Thummidi

5个回答

3

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

这个简单的工具提示对我很有效。您可以添加任何类来使其时尚。

- Naveed

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>

- Shiva Srikanth Thummidi

抱歉，我应该更具体一些。我不想让提示跟随鼠标移动...只是在当前元素上方略微移动一点。 - willdanceforfun

1

没有具体的代码示例，您可以查看事件对象的内容（我假设您是在onmouseover事件上执行此操作）。

您可以使用此对象的clientX和clientY属性来帮助您。

请参阅以下有关事件对象的信息：

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

- James Wiseman

0

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

$(document).tooltip();

在 HTML 中，所有的“title”标签都会变成工具提示...

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

- huncyrus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- deceze · Accepted Answer

请看jQuery中的各种CSS函数，主要是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事件中动态更新位置。