Tooltips Simples E Eficientes Com jTooltip

Em várias situações e em vários sites de tipos diferentes, frequentemente é preciso se valer do recurso de exibir uma informação adicional a um dado apresentado ou complementar o texto com alguma dica; para isso, uma boa solução é usar tooltips. Usar um tooltip em uma situação como esta ou qualquer outra que necessite de uma “diquinha” já é algo consagrado e até considerado bem comum na web.

E, aproveitando a já conhecida simplicidade do jQuery e do belo trabalho que seus adeptos fazem ao criar excelentes plugins para o framework javascript, eis que existe uma solução para tooltip através de um plugin jQuery: jTooltip!

O jTooltip não faz nada de muito excepcional que algum outro plugin para tooltips do jQuery faça, mas possui um diferencial: utiliza um outro excelente plugin jQuery, o hoverIntent, que faz um pequeno delay no evento onMouseOver, proporcionando uma experiência mais agradável.

Basicamente, o jTooltip exibe um tooltip em elementos especificados previamente, nada muito diferente do que se encontra na internet. Vejamos mais a respeito.

Usando jTooltip

Para usar o plugin, primeiramente é preciso fazer download do jTooltip e inserir os scripts necessários para o funcionamento, quais sejam, o próprio jQuery, o hoverIntent e o jTooltip. Mas, se preferir, use o arquivo “jquery.jtooltip.combined-min.js”, que está dentro da pasta “build” do arquivo compactado que é preciso baixar; ele é o combinado no hoverIntent e jTooltip. Tecnicamente falando, usar este arquivo combinado é até melhor, já que se economiza uma requisição HTTP:

Depois disso, é possível usar o jTooltip de uma maneira básica, que é apontando qual elemento jQuery será afetado e, a partir disto, o script faz o tooltip a partir do atributo “title” do elemento. Por exemplo:


$('.dicas a').tooltip();


Além disso, é possível usar o jTooltip a partir de elementos HTML, usando uma das seguintes maneiras:


$('#someElement').tooltip( '...algum HTML ou texto...' );
$('#someElement').tooltip( JQueryObject );
$('#someElement').tooltip( $('#tooltipContents') );


Opções do jTooltip

Existem, também, algumas opções de uso do jTooltip, tais como:

• extraClass. Classe extra para o tooltip (para ser estilizado via CSS).
• maxWidth. Largura máxima do tooltip antes de o texto quebrar.
• posOffsetX. Offset X do tooltip em relação à posição do mouse.
• posOffsetY. Offset Y do tooltip em relação à posição do mouse.
• sensitivity. Quantidade de pixels que o mouse tem que andar (levando em conta “interval”) para o comportamento do tooltip.
• interval. Tempo, em milissegundos, para ativação do tooltip.
• timeout. Tempo, em milissegundos, para o desaparecimento do tooltip.

Então, para um tooltip com uma classe extra “especial-tooltip” e largura máxima de 250px, teríamos o seguinte:


$('#elemento').tooltip({
extraClass: 'especial-tooltip',
maxWidth: 200
});


Conclusões sobre jTooltip

Como citado, o jTooltip não apresenta nada de muito especial em relação a outros plugins jQuery para tooltip, entretanto, seu uso é bem simples e seu diferencial é o uso do hoverIntent, o que garante um “quê” a mais de usabilidade ao processo.

Definitivamente, está recomendado para uso de tooltips em web sites!