Ir para conteúdo

POWERED BY:

Arquivado

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

xarlington

[Resolvido] Como consigo fazer esse efeito?

Por , em Desenvolvimento frontend

Recommended Posts

xarlington    0

xarlington
Postado

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.

 

Clique aqui

Compartilhar este post

Link para o post
Compartilhar em outros sites

xarlington    0

xarlington
Postado

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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/javascript">
$("#box img[title]").tooltip();
/style>
<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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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"></script>
<script type="text/javascript">

Compartilhar este post

Link para o post
Compartilhar em outros sites

xarlington    0

xarlington
Postado

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"><head>
<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??

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

faltou o plugin .

e também o document.ready

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> 
	<script type="text/javascript">
	$(document).ready(function(){
		$("#box img[title]").tooltip();
	});
	</script>
estude jQuery.

Compartilhar este post

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

Informação importante

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

  Aceito