Ir para conteúdo

POWERED BY:

Arquivado

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

vagnerC

[Resolvido] Aparecer texto quando passar mouse.

Recommended Posts

Boa tarde pessoal,

 

Estou procurando mas não estou conseguindo achar nada, então resolvi postar aqui:

Tenho um texto/imagem, gostaria de quando o usuário passar o cursor do mouse sobre o texto/imagem aparecer um texto, tipo um title.

 

 

Alguém pode me ajudar?

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

pesquise por tooltip

 

acredito que é exatamente o efeito que você deseja.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso mesmo que eu precisava.

 

Um exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 
HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=iso-8859-1">
<title>Dica de Contexto </title>

<style type="text/css">
<!--
  .formata { /* esta classe é somente 
               para formatar a fonte */
  font: 12px arial, verdana, helvetica, sans-serif; 
  }
  a.dcontexto{
  position:relative; 
  font:12px arial, verdana, helvetica, sans-serif; 
  padding:0;
  color:#039;
  text-decoration:none;
  border-bottom:2px dotted #039;
  cursor:help; 
  z-index:24;
  }
  a.dcontexto:hover{
  background:transparent;
  z-index:25; 
  }
  a.dcontexto span{display: none}
  a.dcontexto:hover span{ 
  display:block;
  position:absolute;
  width:230px; 
  top:3em;
  text-align:justify;
  left:0;
  font: 12px arial, verdana, helvetica, sans-serif; 
  padding:5px 10px;
  border:1px solid #999;
  background:#e0ffff; 
  color:#000;
  }
  -->
</style>

</head>
<body>
<p class="formata">
Este é um texto qualquer destinado a demonstrar
 a obtenção da dica de contexto com uso das 
<a href="#" class="dcontexto">CSS
<span><strong>CSS</strong>
Sigla para a palavra inglesa "Cascading Style Sheet"
foi traduzido para <strong>Folhas de Estilo em 
Cascata </strong>.Uma técnica de projetar páginas Web, 
separando conteúdo da apresentação.</span></a> 
e com isto fornecer a você mais uma ferramenta 
para construção de suas páginas web </p>
<p class="formata">Este é o parágrafo seguinte 
no fluxo normal 
do documento web..bla..bla..bla...</p>
</body>
</html>
Fonte: http://maujor.com/dicas/tooltip.php

 

Obrigado :D

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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