Tooltips Simples E Eficientes Com jTooltip

jTooltip exemplo tooltip simples e eficiente

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!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

2 Responses

  1. ola, achei interessante essa partede jtooltip,mas não consegui aplicar em meu website, teria como fazer um exemplo prático para que eu possa entender melhor?
    obrigado

Leave a Reply to Tárcio Zemel Cancel reply

Your email address will not be published. Required fields are marked *


Como Criar Um Site, Blog - WebMaster.pt