6.03 Crear Tooltips con HTML y CSS

En este tutorial aprenderás cómo crear una ventana de sugerencias (Tooltips) que aparecerá al pasar el cursor por encima de una imagen. 

NOTA: en este tutorial se trabaja con códigos de programación por lo que se considera de dificultad alta. La finalidad de este tutorial es mostrar que se pueden crear sitios interactivos de forma sencilla, pero se requieren unos conosimientos mínimos de programación. Este tutorial no está diseñado para enseñar a programar ni ofrecemos soporte para cuestiones relacionadas. Es por ello que no se recomienda añadir o editar código a quienes no tienen los conocimientos necesarios. 

Ejemplo

(imagen de ejemplo)

Insertar código

Para añadir a tu sitio una imagen con una ventana de sugerencias, selecciona la opción insertar código y arrástrala hasta tu página (1). Después, pulsa en el icono de configuración (2). 

Pulsa en el botón modificar código de esta opción y para abrir la ventana donde insertar código. Copia y pega el siguiente código en esta ventana:

<ul class="wrapper">
<li><a class="cat" href="#"><span>¡Hola soy tu mascota!</span></a></li>
</ul>

El texto que aparecerá como sugerencia está marcado en azul en el ejemplo. Puedes cambiar este texto y añadir lo que tu quieras. 

Head scripts

Una vez añadido el HTML, debes añadir el estilo con CSS.

1. Abre el menú de páginas y carpetas.
2. Pulsa en el icono de más opciones ( ⋮ ).
3. Selecciona la opción scripts del sitio.

Copia y pega el siguiente código CSS en la pestaña Head scripts:

<style>
.wrapper
{
padding: 0;
width: 100%;
height: 128px;
margin: 0px auto 0px auto;
list-style: none;
}

.wrapper li a
{
display: block;
width: 128px;
height: 128px;
margin: 0 2px;
outline: none;
background: transparent url('http://d2f0ora2gkri0g.cloudfront.net/live297715_cat.png') no-repeat top left;
position: absolute;
left: 35%;
right: 35%;
}

.wrapper li .cat
{
background-position: -0px 0px; /*This icon starts from 0px*/
}

.wrapper li a span /*The span will work as our tooltip and we will “hide” it by setting its initial opacity to 0*/
{
width: 170px;
height: auto;
line-height: 20px;
padding: 10px;
left: 50%;
margin-left: -64px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #3d5470; /*The colour of the text*/
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #fff;
background: rgba(255,255,255,0.5);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 160px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
transition: all 0.3s ease-in-out;
}
.wrapper li a span:before, /*This sets the style of the tooltip*/
.wrapper li a span:after
{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.wrapper li a span:after /*The :after pseudo-element will be placed a pixel away and we’ll make it white, just like the border of the tooltip itself*/
{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #fff;
}
.wrapper li a:hover span /*So, on hover, we will make the span move from the top and fade in*/
{
opacity: 0.9;
bottom: 140px;
}
</style>

El texto que aparece en azul es la URL de la imagen. Puedes cambiarla por la URL de la imagen que quieras utilizar. La resolución de la imagen del ejemplo es 128 x 128 píxeles. Debes ajustar estos valores según la imagen que añadas.

Abrir el modo vista previa

Cuando hayas acabado, abre el modo vista previa y pasa el cursor sobre la imagen para ver la ventana de sugerencias.