如何获取在jQuery中工作提示？

问题描述：

我是JQ noob。我试图让title成一个小提示，我finy小提琴是在这里：如何获取在jQuery中工作提示？

我似乎也有一些错误在我的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(); 

    } 

});

请帮忙，这样的提示旁边会出现鼠标指针我得到这个工作。

更新您的小提琴：http://jsfiddle.net/q52954vc/2/只是增加了一个失踪'）'在第14个 – 2014-11-23 16:11:59

谢谢！但为什么文字会跳跃呢？我只是希望工具提示显示在鼠标的侧面... – Ryan 2014-11-23 16:16:19

这不是一个真正的解决方案，只是一个例子，但你的意思是它应该像那样显示？ http://jsfiddle.net/q52954vc/3/并重新提出为什么文本跳转的问题 - 工具提示被设置为最初不显示，并设置为在悬停时显示阻止，所以它显示在div顶部并将div移动下来。 – 2014-11-23 16:19:44

答

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

.hoverAble 
{ 
    display:inline; 
}

因此与文本div没有100％的宽度，如前所述。之前提示淡入所以提示的位置是与div的宽度div的左边，并添加20像素作为left值我已经添加了jQuery

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

。

更新：对于评论的问题，如果有可能不显示悬停标题 - 刚刚更新的Fiddle有以下调整：如果你不需要对<div>一个title属性，只用它来存储提示副本，只需将其更改为data -attribute像data-title：

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

，并调整复印的提示检索data-title属性的值：

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

如果你真的需要在<div>的title属性，有可能将其删除悬停，并与data-title属性的值再次添加它时，提示淡出。

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

谢谢！任何方式来抑制标题显示后2秒左右？也许更改属性？ – Ryan 2014-11-23 16:40:38

得走了，如果你想出如何拿出标题显示让我知道，同时选择了你的答案。谢谢！ – Ryan 2014-11-23 16:49:45

@ Ryan很高兴我能够有所帮助，只是更新了我对标题问题的回答。 – 2014-11-23 16:59:52

如何获取在jQuery中工作提示？

相关推荐