Ir para conteúdo

POWERED BY:

Arquivado

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

programador php

ToolTip

Por , em Desenvolvimento frontend

Recommended Posts

programador php    0

programador php
Postado

galera fiz esse script mediante à um exemplo do site do maujor

 

caso não gostem podem criticar, deletar, ou sei lá

 

moderadores se quiserem mover ou fazer qualquer coisa com isso

 

fiquem a vontade

 

abraço

 

 

<html>
<head>
<title>Barra de Navegação com tool tip</title>

<style type="text/css">

.contLink a {
 position: relative;
 font: 12px Arial, Verdana,Helvetica,sans-serif;
 text-decoration: none;
 text-align: center;
 padding: 1px 5px;
 margin-right:-1px;
}

.contLink img { z-index: 1; }
.contLink a:hover {
z-index: 1;
}

.contLink a span { 
 display:none;
}

.contLink a:hover span {
 display: block;
 position: absolute; 
 top:20px; 
 left:0; 
 width: 200px;
 padding: 2px 0; 
 color: #666; 
 background:#fffff0;
 font-size: 12px; 
 border:2px dotted #000; 
 text-align:center;
 z-index: 100;
}
 -->
</style>
</head>
<body>
<h3>BARRA TOOL TIP </h3>
<h3>Passe o mouse sobre o carrinho</h3>
<table border=0>
<tr class="contLink">
	<td>celula1</td>
	<td>celula1</td>
	<td>celula1</td>
	<td>celula1</td>
	<td><a href="#"><img src="carrinho_compras.png" width="25" height="25" border=0 /><span>Aqui você digita o Texto que quer que apareça!!!!</span></a></td>
</tr>	
       <tr class="contLink">
	<td>celula1</td>
	<td>celula1</td>
	<td>celula1</td>
	<td>celula1</td>
	<td><a href="#"><img src="carrinho_compras.png" width="25" height="25" border=0 /><span>Aqui você digita o Texto que quer que apareça!!!!</span></a></td>
</tr>
<tr class="contLink">
	<td>celula1</td>
	<td>celula1</td>
	<td>celula1</td>
	<td>celula1</td>
	<td><a href="#" ><img src="carrinho_compras.png" width="25" height="25" border=0 /><span>Aqui você digita o Texto que quer que apareça!!!!</span></a></td>
</tr>
<tr class="contLink">
	<td>celula1</td>
	<td>celula1</td>
	<td>celula1</td>
	<td>celula1</td>
	<td><a href="#"><img src="carrinho_compras.png" width="25" height="25" border=0 /><span>Aqui você digita o Texto que quer que apareça!!!!</span></a></td>
</tr>
</table>	
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Movido:

 

Webstandards: CSS / XML / XHTML/ HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Artigos, Dicas, Tutoriais e Matérias (Webstandards)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Silas Martins    0

Silas Martins
Postado 

a.tooltip
	 {
	 border-bottom: 1px dashed #ff5e2f;
	 text-decoration: none;
	 position: relative;
	 color: #ff5e2f;
	 z-index: 24
	 }
  a.tooltip:hover
	 {
	 border-bottom: 1px dashed #7a7a7a;
	 text-decoration: none;
	 color: #7a7a7a;
	 z-index: 25
	 }
  a.tooltip span
	 {
	 display: none
	 }
  a.tooltip:hover span
	 {
	 border: 1px solid #f0d070;
	 background-color: #ffffe4;
	 position: absolute;
	 color: #d0a010;
	 display: block;
	 padding: 3px;
	 width: 245px;
	 top:2em;
	 left:0em;
	 }
No texto aonde irão clicar para abrir a janela pop-up, basta colocar o seguinte:

 

<a class='tooltip' href='#'>este é o texto que abre o tooltip<span>este é o texto mostrado sobre a link</span></a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Muito bacana cara, gostei da idéia.

Acho que "não chega à evitar" alguns pop-ups, mas já é um belo efeito sem JavaScript.

 

Qnto mais programamos e nos deparamos com desafios, é que aparecem as melhores soluções.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Ficou porreiro mesmo :).

 

Cumps \o/

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