Re-Centering JQuery Tooltips ao redimensionar a janela

Question

Eu escrevi uma função que posições uma dica de ferramenta apenas acima de uma caixa de texto.

A função recebe dois argumentos:

• textBoxId -. O ID da caixa de texto acima do qual a dica de ferramenta aparecerá

  • Exemplo : "# textBoxA"
    

• toolTipId -. O ID da dica de ferramenta que será exibido acima da caixa de texto

  • Exemplo : "# 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(); }
);


    }

---

A função funciona bem em cima de carregamento da página inicial:

---

No entanto, depois que o usuário redimensiona a janela as dicas se deslocar para locais que já não exibição acima da sua caixa de texto associada.

---

Eu tentei escrever algum código para corrigir o problema chamando a função positionTooltip () quando a janela é redimensionada, mas por alguma razão as dicas não se reposicionou como fizeram quando a página carregada:

            var _resize_timer = null;

            $(window).resize(function() {

             if (_resize_timer) {clearTimeout(_resize_timer);}


            _resize_timer = setTimeout(function(){

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

            }, 1000);
        });

Eu estou realmente em uma perda aqui a respeito de porque ele não reposicionar a dica de ferramenta corretamente como o fez quando a página foi carregada inicialmente depois de um redimensionamento.

Answer 1

Sua lógica para calcular a posição da dica só é acionado inicialmente quando você chamar positionTooltip. Você quer chamá-lo para recalcular posição antes da chamada fadeIn.

Answer 2

Eu não entendo por que você usar um setTimeout () para iniciar a sua função. Tentar

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


});

Answer 3

Isso funcionou como um encanto para mim, o único inconveniente é que às vezes ele dose não obter o X adequada, posição Y, aparentemente, não está compensando com valores estofamento / margem do objeto, eu fiz uma correção sujo adicionando esses valores manualmente antes que eles são definidos como:

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

e

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