Tooltip com jQuery
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 --><br /><script src="jquery.js" type="text/javascript"></script> <!-- Biblioteca padrão para a utilização de jQuery --><br /><script src="jquery.dimensions.js" type="text/javascript"></script> <!-- Para fazer com que o toltip se movimente juntamente com o mouse --><br /><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"><br /> $(function() {<br /> $("#meuspan").tooltip({ // Esta linha cria tooltip e passa os paramentros abaixo<br /> track: true, // Para que possa se movimentar<br /> delay: 0, // Tempo de carregamento<br /> showBody: " - ", // o que esta dividindo o titulo e o conteudo<br /> top: -15, // Espaçamento do topo<br /> left: 5 // Espaçamento da direita<br /> });<br /> });<br /> </script><br /> E agora, como de costume, iremos reunir as informações:
<html><br /><head><br /><title>Criando Tooltip</title><br /><link rel="stylesheet" href="jquery.tooltip.css" /><br /><script src="jquery.js" type="text/javascript"></script><br /><script src="jquery.dimensions.js" type="text/javascript"></script><br /><script src="jquery.tooltip.js" type="text/javascript"></script><br /><script type="text/javascript"><br /> $(function() {<br />$("#meuspan").tooltip({ // Esta linha cria tooltip e passa os paramentros abaixo<br /> track: true, // Para que possa se movimentar<br /> delay: 0, // Tempo de carregamento<br /> showBody: " - ", // o que esta dividindo o titulo e o conteudo<br /> top: -15, // Espaçamento do topo<br /> left: 5 // Espaçamento da direita<br /> });
});
</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é.
já atuou em várias empresa de desenvolvimento de softwares para internet e atualmente é proprietário da Info-One, empresa atuante no mercado de site de publicitários, e-commerce, intranets, vitrines virtuais e extranets. Confeciona video aulas de como desenvolver um site desde a instalação dos programas até a implantação do site em um servidor (www.e-container.com.br). Trabalha com diversas linguagens (Php, Java, Ruby on Rails e Flex). Mantém o site www.fernandobecker.com.br
