Ir para conteúdo

POWERED BY:

Arquivado

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

leandro.miranda

Ao passar o mouse exibir balão com dica

Por , em Desenvolvimento frontend

Recommended Posts

leandro.miranda    0

leandro.miranda
Postado

Eu gostaria de fazer uma função para meu site, que ao passar o mouse sobre um campo texto por exemplo telefone aparecer um balção com fundo colorido e o texto com a dica. Tenho muitas coisas aqui que iriam precisar dessa ajuda e seria uma boa maneira de colocar uma informação extra para ajudar o usuario.

 

Alguem tem alguma dica?

Compartilhar este post

Link para o post
Compartilhar em outros sites

leandro.miranda    0

leandro.miranda
Postado

Eu gostaria de fazer uma função para meu site, que ao passar o mouse sobre um campo texto por exemplo telefone aparecer um balção com fundo colorido e o texto com a dica. Tenho muitas coisas aqui que iriam precisar dessa ajuda e seria uma boa maneira de colocar uma informação extra para ajudar o usuario.

 

Alguem tem alguma dica?

 

Valew, muito bom mesmo.. toneladas e toneladas e ja aprendi como se faz.. muito util e adaptavel como eu precisava.. uma luva...

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>tooltip</title>
<style type="text/css">
<!--
a.dcontexto {
	position: relative;
	font: 12px arial, verdana, helvetica, sans-serif;
	padding: 0;
	color: #039;
	text-decoration: none;
	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: 0em;
	text-align: justify;
	left: 6em;
	font: 10px Verdana, arial, helvetica, sans-serif;
	padding: 5px 10px;
	border: 1px solid #999;
	background: #E8EBF2;
	color: #000;
}
-->
</style>
</head>
<body>
<a href="#" class="dcontexto">CSS<span>bla bla bla bla</span></a>
</body>

</html>

 

Essa é uma dica muito legal que usa CSS.. muito boa.. ;)

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