Artigos HTML e CSS jQuery Tooltip - Dica

Uma das formas mais comuns de se apresentar informações ao usuário sobre os componentes da tela é utilizar tooltip. Tooltips são textos informativos exibidos em pequenas caixas flutuantes junto aos elementos (inputs, labels, menus, etc.) quando o usuário para o cursor do mouse sobre eles.

Principalmente em aplicações web já é “natural” do usuário esperar que o tooltip seja exibido quando ele parar o cursor do mouse sobre um elemento, buscando informações sobre ele.

jQuery Tooltip

A biblioteca jQuery UI, uma das mais utilizadas atualmente para construção da interface gráfica de páginas web, oferece uma forma simples e eficiente de exibir tooltips com uma aparência bastante elegante.

Para utilizar essa funcionalidade, são necessários basicamente três passos. O primeiro é importar os scripts e folha de estilos das bibliotecas jQuery e jQuery UI, utilizando o código apresentado na Listagem 1.

Listagem 1: Importando os recursos necessários

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Nos elementos HTML em que desejarmos que o tooltip seja exibido, basta definir o atributo “title” com o texto a ser apresentado para o usuário. Por exemplo, se desejássemos inserir um texto informativo em um campo de texto, poderíamos utilizar o código a seguir.

Listagem 2: Definindo o texto do tooltip de um elemento

<input id="cpf" title="Informe o CPF para ativar o cadastro." />

Por fim, é só chamar a função tooltip() a partir do objeto document selecionado pela jQuery e todos os tooltips da página serão ativados, da seguinte forma:

Listagem 3: Ativando os tooltips da página

<script>
	$(function() {
		$(document).tooltip();
	});
</script>

O resultado do código acima é ilustrado na Figura 1.

Tooltip exibido no campo de texto

Figura 1: Tooltip exibido no campo de texto

Uma vez invocada a função tooltip(), todos os elementos que tiverem o atributo title definido irão apresentar o texto informativo como no exemplo acima.

Visite a documentação oficial para maiores detalhes: http://jqueryui.com/tooltip/.

Para ver este exemplo funcionando, clique aqui.

Até a próxima.