Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola people, tava navegando e achei um site com um efeito bem interessante, quando passo o mouse nos links, vai aparece tipo um balao mostrando o texto, gostaria de saber como consigo fazer o mesmo... desde ja agradeco a atencao.
Fala Angelo, eu achei seu exemplo bom e de facil entendimento, porem estou apanhando aqui, teria como você me dar uma mao, e pq eu fiz referente ao exemplo, porem o tooltip nao aparece, acho que deve ser pq do Javascript, nao sei se lancei ele no lugar adequado, teria como você me dar uma forca irmao?... abaixo segue o codigo:
<!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">](http://www.w3.org/1999/xhtml)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/javascript">
$("#box img[title]").tooltip();<style type="text/css">
.tooltip {
display:none;
background:#900;
font:12px Arial, Helvetica, sans-serif;
color:#FFF;
width:300px;
height:200px;
padding:25px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/img1.jpg" title="Essa é uma imagem para teste de tooltip" />
<img src="img/img2.jpg" title="Churrasco na brasa bom de maisss" />
<img src="img/img3.jpg" title="Vários delícias aqui no restaurante Ipiritaba" />
</div>
</body>
</html>script, e não style.
e você precisa importar a lib jquery
<style type="text/javascript">
troque por:
<script type="text/javascript" src="[http://code.jquery.com/jquery-1.4.3.min.js">](http://code.jquery.com/jquery-1.4.3.min.js)
<script type="text/javascript">E ai irmao, eu tentei aqui do jeito que você indicou, importei a lib, e coloquei num arquivo javascript, botei o codigo, porem continua nao aparecendo:
<!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">](http://www.w3.org/1999/xhtml)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript">
$("#box img[title]").tooltip();
</script>
</style>
<style type="text/css">
.tooltip {
display:none;
background:#900;
font:11px Arial, Helvetica, sans-serif; color:#FFF;
width:200px;
height:100px;
padding:25px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/img1.jpg" title="Isso e apenas uma image para teste de Tooltip #1" />
<img src="img/img2.jpg" title="Isso e apenas uma image para teste de Tooltip #2" />
<img src="img/img3.jpg" title="Isso e apenas uma image para teste de Tooltip #3" />
</div>
</body>
</html>Sera que estou esquecendo de alguma coisa??
faltou o plugin .
e também o document.ready
<script type="text/javascript" src="[http://code.jquery.com/jquery-1.4.3.min.js">](http://code.jquery.com/jquery-1.4.3.min.js)
<script type="text/javascript" src="[http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js">](http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js)
<script type="text/javascript">
$(document).ready(function(){
$("#box img[title]").tooltip();
});
</script>estude jQuery.A tah, acho que vou voltar para o exemplo do site do Maujor mesmo, feito em HTML e CSS e mais tranquilo, de qualquer forma agradeco pela atencao http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
pesquise por tooltip