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

【问题标题】：How to create a tooltip with jquery without a plugin?如何在没有插件的情况下使用 jquery 创建工具提示？
【发布时间】：2014-09-20 11:55:43
【问题描述】：

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

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

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

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

编辑：为了澄清，我不希望工具提示随鼠标移动。

【问题讨论】：

在你的代码中有 bug ready(function(){});括号不见了！

标签： jquery css

【解决方案1】：

看看 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 事件中动态更新位置。

【讨论】：

我想就是这样。现在看看那里的 css 函数似乎很明显！
顶部似乎工作正常，但我的 'left' 属性似乎没有做任何事情： $('#tooltip').css({ top : $(this).offset() .top - 50 + 'px'，左：$(this).offset() }); -- 有什么想法吗？
offset() 返回一个具有“top”和“left”属性的对象，所以你必须使用offset().left。你还附上了“px”吗？
啊，这就是我所缺少的。 .left 和 px。 tx heaps deceze

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

你的 clientX 和 clientY 属性应该会有所帮助

查看以下事件对象：

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

【讨论】：

【解决方案4】：

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

<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>

【讨论】：

对不起，我应该更具体。我不想让尖端随着鼠标移动..就在当前元素上方一点点。

【解决方案5】：

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

$(document).tooltip();

而在 html 中，所有的“标题”标签都变成了工具提示...

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

【讨论】：