代码之家 › 专栏 › 技术社区 › leeand00

调整窗口大小时重新居中jquery工具提示

tooltip textbox jquery javascript

leeand00 · 技术社区 · 15 年前

我编写了一个函数,它将工具提示放置在文本框上方。

函数接受两个参数:

文本框 -将在其上显示工具提示的文本框的ID。
- 例子 : “文字”
工具性的 -将显示在文本框上方的工具提示ID。
- 例子 : “工具”

    function positionTooltip(textBoxId, toolTipId){

        var hoverElementOffsetLeft = $(textBoxId).offset().left;
        var hoverElementOffsetWidth = $(textBoxId)[0].offsetWidth;

        var toolTipElementOffsetLeft = $(toolTipId).offset().left;
        var toolTipElementOffsetWidth = $(toolTipId)[0].offsetWidth;

        // calcluate the x coordinate of the center of the hover element.
        var hoverElementCenterX =
            hoverElementOffsetLeft + (hoverElementOffsetWidth / 2);

        // calculate half the width of the toolTipElement
        var toolTipElementHalfWidth = toolTipElementOffsetWidth / 2;
        var toolTipElementLeft = hoverElementCenterX - toolTipElementHalfWidth;

        $(toolTipId)[0].style.left = toolTipElementLeft + "px";


        var toolTipElementHeight = $(toolTipId)[0].offsetHeight;
        var hoverElementOffsetTop = $(textBoxId).offset().top;
        var toolTipYCoord = hoverElementOffsetTop - toolTipElementHeight;
        toolTipYCoord = toolTipYCoord - 10;
        $(toolTipId)[0].style.top = toolTipYCoord + "px";

        $(toolTipId).hide();
$(textBoxId).hover(
 function(){ $(toolTipId + ':hidden').fadeIn(); },
 function(){ $(toolTipId + ':visible').fadeOut(); }
);

$(textBoxId).focus (
 function(){ $(toolTipId + ':hidden').fadeIn(); }
);

$(textBoxId).blur (
 function(){ $(toolTipId+ ':visible').fadeOut(); }
);


    }

函数在初始页面加载时工作正常: alt text

但是,用户调整窗口大小后,工具提示将移动到不再显示在其关联文本框上方的位置。

alt text

我尝试编写一些代码来解决这个问题,方法是在调整窗口大小时调用positionTooltip()函数,但由于某种原因,工具提示不会像加载页面时那样重新定位:

            var _resize_timer = null;

            $(window).resize(function() {

             if (_resize_timer) {clearTimeout(_resize_timer);}


            _resize_timer = setTimeout(function(){

                 positionTooltip('#textBoxA', ('#toolTipA'));

            }, 1000);
        });

在这里,我真的很困惑,为什么它没有像调整大小后最初加载页面时那样正确地重新定位工具提示。

3 回复 | 直到 15 年前

MyItchyChin JNK 15 年前

计算工具提示位置的逻辑最初仅在调用positionToolTip时激发。您想在法登呼叫之前调用它重新计算位置。

pixeline 15 年前

我不明白为什么要使用setTimeout()来启动函数。尝试

$(function(){
// all your code onDocumentReady
...
...
            $(window).resize(function() {
                 positionTooltip('#textBoxA', ('#toolTipA'));
        });


});

Rod 15 年前

这对我来说就像是一种魅力,唯一的缺点是有时它得不到正确的x,y位置,显然不是用对象的填充/边距值进行补偿,我在设置这些值之前手动添加了这些值,从而进行了一次肮脏的修复:

  toolTipElementLeft = toolTipElementLeft + 40;
  $(toolTipId)[0].style.left = toolTipElementLeft + "px";

和

  toolTipYCoord = toolTipYCoord + 25;
  $(toolTipId)[0].style.top = toolTipYCoord + "px";