如何让工具提示在jQuery中工作？

我是一个JQ noob。我正在尝试将

标题

添加到一个小工具提示中，我的finy fiddle在这里：

我的jQuery代码中似乎也有一些错误，但不确定错误在哪里。 代码如下：

$(document).ready(function () {

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

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

        $('#myToolTip').html(tip).fadeIn();
        //$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

    }, function() {

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

    }

});

请帮助我完成此操作，以便工具提示显示在鼠标指针旁边。

再次更新您的。调整旨在为文本添加CSS：

.hoverAble
{
  display:inline;
}

因此，带有文本的div没有像以前那样具有100%的宽度。我已经添加了jquery

    var tPos = $(this).width() + 20;
    $('#myToolTip').css({"left" : tPos});

在工具提示淡入之前，工具提示的位置位于div的左侧，具有div的宽度，并添加20px作为

left

的值

更新：对于注释中的问题，如果可以不在悬停状态下显示标题，则只需通过以下调整更新：如果您不需要在

上设置

标题

属性，并且只使用它来存储工具提示的副本，只需将其更改为

数据

-属性，如

数据标题

：

<div class="hoverAble" data-title="I am blah!">sdddd</div>

如果您确实需要

上的

标题

属性，可以在鼠标悬停时将其删除，并在工具提示淡出时使用

数据标题

属性的值再次添加

---

仅供参考：

更新了您的小提琴：只在第14行添加了一个缺少的

）

，谢谢！但是为什么文本会像那样跳跃呢？我只是希望工具提示显示在鼠标的一侧…这不是一个真正的解决方案，只是一个例子，但你的意思是它应该这样显示吗？再问一下为什么文本会跳转-工具提示最初设置为“不显示”，并设置为“悬停时显示块”，因此它显示在div的顶部并向下移动div。谢谢！这看起来确实更好，但仍然是一个奇怪的问题！另外，标题在几秒钟后也会显示其文本：（这是因为文本的div当前有100%的宽度。我刚刚添加了一个调整过的提琴和一个答案，以避免太多的评论。谢谢！有没有办法在这2秒左右后抑制标题显示？可能会更改属性？我得走了，如果你知道如何去掉标题显示，请告诉我，我已经选择了你的答案。）同时。谢谢！@Ryan很高兴我能帮上忙。刚刚用标题更新了我对这个问题的答案。

var tip = "RRR " + $(this).data('title');