Question

我为jQuery编写了一个工具提示插件，只要用户将鼠标悬停在元素上，就会显示带有指定文本的工具提示。默认情况下，提示显示在光标的右上角，但如果工具提示太宽而无法放在页面上，则会显示在左上角。我遇到的问题是，在使用.text（）之后，我需要检查工具提示的新宽度，看它是否比窗口宽度宽，但似乎有一个延迟，使得新的宽度不是在我已经调用.width（）之后才设置。因此，例如，工具提示以空div开头，即使我在.width（）之前调用.text（），当我调用.width（）时，div仍然是宽度为0.这里是我一直在使用的代码：

$.fn.tooltip = function(tText) {
    this.each(function() {
        $(this).unbind('.tipE').bind('mouseenter.tipE', function(e) {
            $('#toolTip')
                .hide()
                .stop(true, true)
                .text(tText)
                .positionAtCursor(e)
                .fadeIn('fast');
        }).bind('mouseleave.tipE', function() {
            $('#toolTip').fadeOut('fast');
        }).bind('mousemove.tipE', function(e) {
            $('#toolTip').positionAtCursor(e);
        });
    });
};

$.fn.positionAtCursor = function(e) {
    return this.each(function() {
        var top  = e.pageY - 25;
        var left = e.pageX + 10;

        var rightBound = $(window).width();
        if (rightBound && (e.pageX + $(this).width() > rightBound)) {
            left = e.pageX - $(this).width() - 20;
        }

        $(this).css({ 'top' : top, 'left' : left });
    });
};

我有没有办法让.text（）回调，以便我可以等待调用positionAtCursor（）？或者我的代码中还有其他一些我一直缺失的缺陷？

由于

Answer 1

而不是.text(tText).positionAtCursor(e)尝试：

.html(
   function(index,oldhtml){
      $(this).html(tText);
      if($(this).html()!==oldhtml){ $(this).positionAtCursor(e); } 
   });
)

可能是一种相当粗略的方法，但也许这样可行。

我想你也可以

while($(this).html()==oldhtml){ $(this).html(tText); }
$(this).positionAtCursor(e);

Answer 2

事实证明，在'mouseenter'之前调用'mousemove'实际上是一个问题。因此，由于直到'mouseenter'才设置文本，因此第一次调用positionAtCursor时宽度似乎为0。现在我已经在'mousemove'中为选择器添加'：visible'了，似乎工作得很好：

$('#toolTip:visible').positionAtCursor(e);

Answer 3

我面临同样的问题。

解决方案在这里： https://stackoverflow.com/a/2716286/1238317

你应该使用dequeue()：

 $('#toolTip')
    .hide()
    .stop(true, true)
    .queue( YOUR_DEQUEUED_FUNCTION() )
    .positionAtCursor(e)
    .fadeIn('fast');

其中：

YOUR_DEQUEUED_FUNCTION = function() {
$(this).dequeue();
$('#toolTip').text(tText);
// ANY OTHER CODE BEFORE NEXT THINGS EXECUTED :)
}

jQuery .text（）太慢了（回调可能吗？）

3 个答案: