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

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

转载作者：技术小花猫更新时间：2023-10-29 11:09:14

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

基本上，使用悬停的 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>

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

编辑:澄清一下，我不希望工具提示随着鼠标移动。

最佳答案

看看各种CSS functions在 jQuery 中，主要是 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 中的位置。事件。

关于jquery - 如何在没有插件的情况下使用 jquery 创建工具提示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1254569/