Olá, pessoal! Veremos hoje como criar um tooltip utilizando nossa já conhecida biblioteca jQuery. Bom, vamos lá:
Primeiro iremos importar as bibliotecas que iremos utilizar:
<link rel="stylesheet" href="jquery.tooltip.css" /> <!-- Importamos o css que vem naivo com o jQuery toltip -->
<script src="jquery.js" type="text/javascript"></script> <!-- Biblioteca padrão para a utilização de jQuery -->
<script src="jquery.dimensions.js" type="text/javascript"></script> <!-- Para fazer com que o toltip se movimente juntamente com o mouse -->
<script src="jquery.tooltip.js" type="text/javascript"></script> <!-- Biblioteca responsavel pela utilizaçã do toltip -->Bem, agora que já importamos as bibliotecas vamos montar nosso texto com o tooltip:
Fernando Becker em mais um tutorial <span id="meuspan" title="MEU TITUL - Descricao.">toltip aqui.</span>.Agora vamos chamar a função que irá criar o toltip:
<script type="text/javascript">
$(function() {
$("#meuspan").tooltip({ // Esta linha cria tooltip e passa os paramentros abaixo
track: true, // Para que possa se movimentar
delay: 0, // Tempo de carregamento
showBody: " - ", // o que esta dividindo o titulo e o conteudo
top: -15, // Espaçamento do topo
left: 5 // Espaçamento da direita
});
});
</script>
E agora, como de costume, iremos reunir as informações:
<html>
<head>
<title>Criando Tooltip</title>
<link rel="stylesheet" href="jquery.tooltip.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#meuspan").tooltip({ // Esta linha cria tooltip e passa os paramentros abaixo
track: true, // Para que possa se movimentar
delay: 0, // Tempo de carregamento
showBody: " - ", // o que esta dividindo o titulo e o conteudo
top: -15, // Espaçamento do topo
left: 5 // Espaçamento da direita
});
});
</script>
</head>
<body>
Fernando Becker em mais um tutorial <span id="meuspan" title="MEU TITULO - Descricao.">toltip aqui.</span>.
</body>
</html>
Bom, pessoal, para quem quiser baixar o tutorial estou disponibilizando aqui.
Abraço e até.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?