Archive for category Tooltip

Plugin JQuery Tooltip – gaTooltip

Posted by mateusgamba in JQuery, Plugin, Tooltip on 12 de Maio de 2011

Olá Pessoal

Desenvolvi esse plugin para mostrar uma ToolTip de forma simples. Apesar de ter vários desenvolvidos pela internet, não encontrei nenhum de forma simples, eficiênte e que me agradasse, então resolvi desenvolver.
Estou publicando para possam utilizar e modificar.

DOWNLOAD do código completo com exemplo

Para visualizar, clique aqui

Forma de utilizar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>gaToolTip</title>
		<style type="text/css">
			body { font-family:Arial; font-size:12px; }
			#gaTool { background-color:#EFEFEF; border:1px solid #F00; color:#000; }
			.gaTool { color:#F00; font-weight:bold; }
        </style>    

		<script type=text/javascript src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type=text/javascript src="query.gatooltip-1.0.js"></script>

		<script type="text/javascript">
          $(document).ready(function(){
              $(".gaTool").gaToolTip();
          });
        </script>
    </head>   
    <body>
    	<h1>gaToolTip - Passe o mouse sobre as palavras em vermelho</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo <span class="gaTool" title="Demostração ToolTip">ligula</span> eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis <span class="gaTool" title="?">parturient montes</span>, nascetur ridiculus mus.</p>
    </body>
</html>

Qualquer sugestão ou bugs que encontrarem, se possível me informem.

Até a próxima.

7 comentários