Question

我是JQ noob。我试图将title变成一个小工具提示，我的小提琴就在这里：

我的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();

    }

});

请帮助我解决此问题，以便鼠标指针旁边显示工具提示。

Answer 1

再次更新了Fiddle。调整是为文本添加CSS：

.hoverAble
{
  display:inline;
}

所以带文字的div与之前的宽度不是100％。我添加了jquery

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

在工具提示淡入之前，因此工具提示的位置位于div的左侧，并带有div的宽度，并为left添加了20px的值。

更新：对于评论中的问题，如果在悬停时无法显示标题 - 只需更新Fiddle并进行以下调整：如果您不需要title上有一个<div>属性，仅用于存储工具提示的副本，只需将其更改为data - data-title等属性：

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

并调整工具提示的副本以检索data-title属性的值：

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

如果您确实需要title上的<div>属性，则可以在悬停时将其删除，并在工具提示淡出时再次使用data-title属性的值添加它

供参考：http://api.jquery.com/data/

如何在jQuery中使用工具提示？

1 个答案: