Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mateushim

Tooltip simples com Jquery

Por , em Javascript

Recommended Posts

mateushim    0

mateushim
Postado

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.

 

Para mais conteúdo, acesse meu blog http://mateusgamba.wordpress.com

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Peperaio    20

Lucas Peperaio
Postado

Po cara, parabéns pela iniciativa...vou inclusive usar em meu projeto online:

http://www.antiprotecao.com.br/

 

òtima idéia para a ajuda...Só uma pergunta, porque eu ainda não cheguei a testar..se um texto está completamente no topo da página, e eu passar o mouse nele, o efeito irá acontecer para baixo? ou ainda sim, aparecerá em cima do texto?

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Arruda    0

João Arruda
Postado

Muito bom, mateushim, bom mesmo!

 

Eu já cheguei a desenvolver uma tooltip dessas, sem JQuery, apenas com uma div com position:absolute e chamando as funções Javascript dependendo das coordenadas do mouse, ou seja, a tooltip aparecia bem aonde estava o mouse e, se o mouse se movesse para a direção onde estava a tooltip, esta se movia junto.

 

Se quiserem que eu poste o meu código, só pedir :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

mateushim    0

mateushim
Postado

Po cara, parabéns pela iniciativa...vou inclusive usar em meu projeto online:

http://www.antiprotecao.com.br/

 

òtima idéia para a ajuda...Só uma pergunta, porque eu ainda não cheguei a testar..se um texto está completamente no topo da página, e eu passar o mouse nele, o efeito irá acontecer para baixo? ou ainda sim, aparecerá em cima do texto?

 

 

Boa Lucas, para as minhas aplicações não houve essa necessidade, então não cheguei a realizar esse tratamento, somente nas lados. Mas realmente, é interessante ter esse tratamento. Irei fazer isso para ficar mais completo.

 

 

Vlw

 

Muito bom, mateushim, bom mesmo!

 

Eu já cheguei a desenvolver uma tooltip dessas, sem JQuery, apenas com uma div com position:absolute e chamando as funções Javascript dependendo das coordenadas do mouse, ou seja, a tooltip aparecia bem aonde estava o mouse e, se o mouse se movesse para a direção onde estava a tooltip, esta se movia junto.

 

Se quiserem que eu poste o meu código, só pedir :D

 

 

Vlw pela sugestão João.

O proposito de desenvolver esse componente era justamente de deixar sempre centralizado e fixo em relação ao texto e não ao ponteiro do mouse.

Mas dá sim de parametrizar desse jeito, para se mover centralizado ao ponteiro do mouse, isso não deixa de ser uma boa sugestão.

vlw

flw

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

um comportamento que precisei, e por isso tive q implementar um plugin do zero

 

seguindo uma logica completamente diferente foi:

 

o tooltip permanecer aparente, e o usuario conseguir clicar em um link ou selecionar um texto dentro do balão do tooltip.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito