qtip.jpg

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.

PLAIN TEXT
JavaScript:
<script language="JavaScript" src="qTip.js" type="text/JavaScript"></script>

Agregaremos un poco de CSS para personalizar los bordes, fondos, fuentes y demás de nuestros tooltips

PLAIN TEXT
CSS:
div#qTip {
 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.

PLAIN TEXT
HTML:
<a href="#" title="Aquí deberás agregar el texto que mostraremos en el tooltips">Enlace de texto</a>