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 [4], que faz um pequeno delay no evento onMouseOver, proporcionando uma experiência mais agradável.
Basicamente, o jTooltip [5] 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 [6] 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:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jtooltip.combined-min.js"></script>
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!
