Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
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
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
>
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
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.
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?