Cuadro dialogo

nene84 · #1 (**permalink**) 25/10/2010, 09:48

Buenos dias, a ver si alguien puede echarme una mano.
Estoy intentando en mi página que al poner el raton encima de una palabra salga un cuadro de dialogo, que no una alerta ni una ventana nueva, con un texto.

¿Sabeis como podria hacerlo? El evento si se como manejarlo pero no se como hacer que salga el cuadro de dialogo. Seria como cuando dejas encima de un icono el raton que sale el dialogo con la información, pues algo así.

Gracias!

Perr0 · #2 (**permalink**) 25/10/2010, 09:53

te refieres a un tooltip?

nene84 · #3 (**permalink**) 25/10/2010, 09:54

Justo! No sabia el nombre, gracias.

nene84 · #4 (**permalink**) 25/10/2010, 10:01

Por si a alguien le interesa:

<style>
a.info {
position:relative;
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none;
}
a.info:hover {
z-index:25; background-color:#ff0;
}
a.info span { // Esta es la que hace que el texto en el span no se despliegue en el estado normal de la URL
display: none;
}
a.info:hover span { // Esta zona es la que hace que se despliegue cuando nos ubicamos sobre el texto de la URL o la imagen dentro de la URL
display:block;
position:absolute;
top:2em;
left:2em;
width:200px;
border:1px solid #0cf;
background-color:#EEEEEE;
color:#000000;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 5px;
} </style>

En las instrucciones donde quieras agregar el Tooltip debes hacerlo de esta forma:

<a href="#" class="info">
Tooltip
<span>
Texto a mostrar
</span>
</a>

Perr0 · #5 (**permalink**) 25/10/2010, 10:56

a ver si me la puedo, estoy en el trabajo...pero con tal de ayudar
jajajajaaja

Perr0 · #6 (**permalink**) 25/10/2010, 14:40

Listo, mira me fije tarde que querias un tooltip con estilos,
como este foro es javascript

lo hice con javascript, si quieres probar descarga este archivo

http://www.megaupload.com/?d=6HSTPCPS

funciona de la siguiente manera, entre las etiquetas <HEAD></HEAD>
colocas

Código:

<script language="JavaScript" type="text/javascript" src="toolspanperruno.js"></script>

suponiendo que sea la ruta del JS

luego para darle un tooltip a uno o varios textox, ejemplo

Código HTML:

Probando un <a href="#" class="info">tooltip<span>Aquí un ToolTips</span></a>, que hizo el forero Perr0

bueno en la descarga sale un ejemplo para llegar y ejecutar

requisitos, que la etiqueta <A> tenga la clase "info" y dentro tenga un <SPAM> con el texto del tooltip

sino, pasa de largo

salu2 y como siempre para modificar a gusto

masterojitos · #7 (**permalink**) 25/10/2010, 14:48

Podrias usar BOXOVER

U otra opcion seria wz_tooltip

Suerte

Perr0 · #8 (**permalink**) 25/10/2010, 17:18

se me olvidaba renombra el archivo index.php a index.htm, por defecto siempre guardo como php pero no tiene nada de codigo

salu2