Question

我编写了一个函数，将工具提示放在文本框的正上方。

该函数有两个参数：

textBoxId - 工具提示将在其上方显示的文本框的ID。
- 示例：“＃textBoxA”
toolTipId - 将显示在文本框上方的工具提示的ID。
- 示例：“＃toolTipA”

    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);
        });

我真的不知道为什么它没有正确地重新定位工具提示，就像在调整大小后最初加载页面时一样。

Answer 1

计算工具提示位置的逻辑仅在您调用positionTooltip时才会触发。你想在fadeIn调用之前调用它来重新计算位置。

Answer 2

我不明白为什么你使用setTimeout（）来启动你的功能。试试

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


});

Answer 3

这对我来说就像一个魅力，唯一的缺点是有时候它没有得到正确的X，Y位置，显然不是用对象的填充/边距值补偿，我通过手动添加这些值做了一个脏修复在他们设置之前：

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

和

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

调整窗口大小时重新定位JQuery工具提示

3 个答案: