Ejemplo realizado en HTML5 y CSS para que puedas implementar ToolTips en las páginas de tus sitios de una forma fácil y profesional.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este ejemplo realizado en HTML5 y con puro CSS, es una buena opción para que puedas implementar ToolTips en las páginas de tus sitios de una forma fácil y profesional, sin necesidad de recurrir a javascript.

Hoy en día el uso de ToolTips es una herramienta muy utilizada en sitios y aplicaciones web, estas permiten mediante un globo o mensaje de texto emergente, mostrar mucha información cuando el usuario coloca el mouse en una frase, texto enlace.

A continuación puedes ver mas características del ejemplo y ver una demostración.

Mas información sobre el programa.

Indice del contenido

Descripción y requerimientos.
Vista previa del Tooltip en la página.
Configurar y crear el Tooltip.

1 - Descripción y requerimientos.

El tooltip puede utilizarce en los siguientes navegadores web:

Internet explorer 8 o superior
FireFox versión 3.6 o superior.
Opera 10 o superior
Google Chrome 4 o superior
Safari 4o superior.

El ejemplo utiliza el atributo Data de HTML5 y los elementos After y Before de CSS para convertir cualquier elemento en una ventana emergente, es decir para crear el tooltip.

El ejemplo realizado por el autor está inspirado en este otro ejemplo: Crear múltiples backgrounds y bordes con CSS. (No requiere de Javascript o elementos HTML adicionales para funcionar.)

2 - Vista previa del Tooltip en la página.

Aquí puedes ver una vista previa de los tooltips creados mediante esta técnica.

3 - Configurar y crear el Tooltip.

En el ejemplo para descargar, hay un archivo HTML. Este archivo contiene el código CSS declarado en la misma página web, no en un archivo externo.

Para crear el Tooltip es muy sencillo, sólo deberás añadir una etiqueta llamada data-tooltip en elenlace o texto que quieras desplegarlo. Por ejemplo:

<a href="http://www.enlace.com" data-tooltip="Aquí va el Texto del tootltip">El texto del enlace</a>

Para modificar el estilo visual y otras propiedades puedes mirar el código CSS. Por ejemplo para cambiar el color degradado, puedes hacerlo en esta línea (from es el color inicial y to el color final del degradado):

-webkit-border-image:-webkit-gradient(linear, left top, left bottom, from(#33ccff), to(#33acfc));

Para modificar la transparencia, cambiar el valor en la siguiente línea o atributo CSS:

opacity:0.94;

Aquí puedes ver una vista previa al modificar la transparencia:

Para establecer otras opciones del tooltip por ejemplo el color de fuente, el ancho del tooltip, etc .. modificar las siguientes líneas del código CSS:

Dimensiones del área del Tooltip.

Ancho: width:290px

padding:5px;

Estilos para la fuente:

/* Set font styles */
color:#fcfcfc;
font-size:16px;
font-weight:normal;
font-family:helvetica neue, calibri, verdana, arial, sans-serif;

Establecer el fondo:

background:#3198dd;
text-align:center;
outline:none;

Color de la sombra del texto

/* Add a Text shadow */
text-shadow:#2187c8 0 1px 0px;