0

Eu estou a usar um tooltip plugin em jQuery para modificar atributos title="" de várias classes. Estava a correr tudo bem até que me apercebi de um problema - Eu estou a usar um botão que muda de classe conforme ele é clicado, e quando este botão muda de classe o tooltip deixa de funcionar.

É óbvio que eu experimentei adicionar a class do botão para a qual ela é alterada após ter sido clicada à mesma função do tooltip no JavaScript, mas isto não funcionou.

Então a minha solução para isto foi usar um setInterval() para correr esta função de x em x tempo para que o tooltip voltasse a funcionar de novo após a class deste botão ter sido modificada.

Mas agora eu tenho 2 questões:

  • Quando nós utilizamos o setInterval() o pedido desta função está a ser enviado para o servidor cada vez que ela tenta correr de novo, ou ela está apenas a ser executada na própria Janela do Navegador em que o utilizador tem em aberto?
    (Isto é uma preocupação relacionada ao Bandwidth do servidor)

  • Eu procurei e encontrei outra maneira de constantemente executar esta função utilizando setTimeout que dizem ser uma melhor maneira de abordar o mesmo.

Então qual destas duas soluções será a melhor solução para abordar isto e qual é a diferença entre as duas?

// setTimeout
(function loopingFunction() {
    $('.like-button').tipsy({fade: true, gravity: 'w'});
    setTimeout(loopingFunction, 500);
})();
// setInterval
setInterval(function(){
    $('.botao-gosto').tipsy({fade: true, gravity: 'w'});
}, 500);

Juntamente à minha pergunta vai aqui também um exemplo no JsFiddle caso possa ajudar: http://jsfiddle.net/jdbe0fL7/

1
  • 1
    setTimeout seria apenas um delay, já setInterval é uma repetição continua com delay.
    – Syzoth
    Commented 26/05/2015 às 17:40

2 Respostas 2

3

Esse plugin já tem opções para fazer isso. A sintaxe segundo a documentação é:

$('#example-delay').tipsy({delayIn: 500, delayOut: 1000});

Um exemplo seria:

$('.like-button').tipsy({
    fade: true,
    gravity: 'w',
    delayIn: 500,    // pausa antes de abrir
    delayOut: 1000   // pausa antes de voltar a fechar
});

Exemplo: http://jsfiddle.net/jdbe0fL7/2/

Das duas soluções que tinhas o setInterval era má ideia pois fica a correr o código indefenidamente sem necessidade.

Nota / pedido de esclarecimento:

Na tua pergunta referes "ser enviado para o servidor" e "modificar atributos title de várias classes". O teu código não reflete isso daí a minha resposta a indicar a documentação. Se a resposta não fôr o que procuravas tenta ser mais específico. Regra geral usar o setInterval neste caso ou em caso de comunicação com o servidor é raramente a solução certa.

3
  • obrigado pela ajuda @Sergio mas o problema aqui é que quando uma nova class é adicionada ao botão o plugin deixa de funcionar, ou seja o title volta a ser o title nativo e não o title costumizado do plugin. a não ser que actualize a página para que volte a ser o costumizado. Daí eu estar constantemente a correr o código várias vezes usando setInterval. só desta maneira é que consigo fazer com que o tooltip volte a funcionar novamente. Eu não consigo recriar este problema no jsfiddle pois no jsfiddle quando uma nova class é adicionada o botão continua a funcionar normalmente :\
    – Chun
    Commented 26/05/2015 às 18:25
  • 1
    @Chun o setInterval não pode ser a solução, isso é uma gambiarra má :) Explica melhor como estás a mudar a classe. Faz um jsFiddle com essa parte para eu perceber como estás a fazer isso e mudar o title.
    – Sergio
    Commented 26/05/2015 às 19:12
  • Este é um script que não foi desenvolvido por mim, eu estou apenas a criar uma parte de um tema para esta plataforma por isso nem eu sei ao certo onde está e qual é o código que está a gerar esta class adicional para o tal botão no meio destes ficheiros todos. Mas eu consegui resolver o prolblema usando .hover() em vez do normal $( document ).ready() sugerido pelo plugin e agora está a funcionar correctamente! Obrigado por toda a ajuda amigo :)
    – Chun
    Commented 26/05/2015 às 22:17
1

Consegui resolver o problema - verificando se o parent/wrapper div tem o mouse dentro dela utilizando .hover() em vez do $( document ).ready() que é sugerido pelo plugin

Por exemplo:

$(".parent-wrapper").hover(function() {
    $('.like-button').tipsy({fade: true, gravity: 'w'});
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .