Повторное центрирование подсказок JQuery при изменении размера окна

Question

Я написал функцию, которая помещает всплывающую подсказку чуть выше текстового поля.

Функция принимает два аргумента:

• textBoxId - идентификатор текстового поля, над которым появится всплывающая подсказка.

  • Пример : "# textBoxA"
    
    

• toolTipId - идентификатор подсказки, которая появится над текстовым полем.

  • Пример : "# 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(); }
);


    }

<ч /> Функция отлично работает при начальной загрузке страницы:

<ч /> Однако после изменения пользователем размера окна всплывающие подсказки перемещаются в места, которые больше не отображаются над соответствующим текстовым полем.

<Ч /> Я попытался написать некоторый код для решения проблемы, вызвав функцию 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

Это сработало для меня как обаяние, единственный недостаток в том, что иногда он не получает правильную позицию X, Y, по-видимому, не компенсирует значения отступов / полей объекта, я сделал грязное исправление, добавив эти значения вручную прежде чем они установлены как:

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

и

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

Answer 3

Я не понимаю, почему вы используете setTimeout () для запуска вашей функции. Попробуйте

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


});