QTip un liviano script que nos permite generar sencillos tooltips de ayuda haciendo uso del atributo “Title” de nuestros elementos Html, sean estos enlaces, imágenes, etc. QTip trabajará sobre todos los elementos que están en la página. Y lo mejor es que, QTip es realmente sencillo de personalizar con un poco de CSS.
Ver Demo - Descarga Demo - Info qrayg
Uso
Descargar el script QTip.js (usar botón derecho y guardar “enlace como”). Lo alojaremos en nuestra carpeta o servidor. Posteriormente llamaremos a esa librería incluyendo el siguiente código entre las etiquetas < Head > …..< /Head > de nuestra Web.
Agregaremos un poco de CSS para personalizar los bordes, fondos, fuentes y demás de nuestros tooltips
padding: 3px;
border: 1px solid #783B1C;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #A13F22;
color: #FFF;
font: bold 9px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}
Para utilizarlo simplemente basta con agregar el texto deseado dentro del atributo “title” de cualquiera de nuestros elementos, un ejemplo en un enlace.
Loading ...
OLDSKULL
08-01-2008
Permalink
Buenisimo este script, buscaba un tooltip tan sencillo como este!
Muchas gracias por el aporte!
sanshiro
08-01-2008
Permalink
woaaaaaaaa, muy buenoooo¡ lo utilizare en mi web, por cierto, creo que deberias poner uno que otro articulo sobre SEO, checa esta web que me encontre hace poco, tiene buenos articulos sobre eso http://www.adivor.com.mx
ARETINO
08-01-2008
Permalink
Interesante. Una pregunta, ¿Se pueden incluir imagenes o hay un codigo que cuando uno haga hover muestre una imagen? . De todos modos gracias.
OLDSKULL
08-01-2008
Permalink
Con css podrias... background-image