w3.unpo<code>todo

Descripciones emergentes

Las descripciones emergentes son estos cuadraditos de texto que aparecen al pasar con el ratón por encima de algún elemento html.

Crear descripciones emergentes con CSS3 es coser y cantar. Para esto utilizamos el pseudo-elemento ::before cuyo contenido content: attr(data-tooltip), donde data-tooltip es un atributo personalizado.

Para quien no lo sepa, en HTML5 podemos utilizar atributos personalizados. El nombre de estos atributos empieza con data- y la especificación w3.org los considera zonas de almacenamiento privado para los datos ( privados en el sentido que el usuario no las puede ver ).

<div id="miDiv" data-test="el valor del atributo" >

Estos atributos nos vienen de maravilla en javascript.

function miFuncion() {
  var miTip = document.getElementById("miDiv").getAttribute("data-test");
  console.log(miTip);
}

O todavÍa mejor:

function miFuncion() {
  var miTip = document.getElementById("miDiv").dataset.test;
  console.log(miTip);
}

Lea: John Resig HTML5 data- Attributes

También los podemos utilizar en CSS3 con los pseudo-elementos ::before y ::after, y esto es lo que haremos a continuación.

[data-tooltip]::before {content:attr(data-test);}

Un ejemplo sencillo

El HTML

En el siguiente ejemplo en el HTML tenemos un párrafo <p class = "emergente"> con algunas palabras que queremos explicar, como por ejemplo "hidalgo".
Estas palabras aparecen dentro de un elemento <span>, y la descripción que queremos que aparezca en pantalla es el valor del atributo data-tooltip de este.

<span data-tooltip = "Generalmente se refiere . . .">hidalgo</span>

En un lugar de la Mancha de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un 
hidalgo 
de los de lanza en astillero, adarga 
antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, 

salpicón las más noches, duelos y quebrantos los sábados, lentejas los 
viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

El CSS

Queremos que la descripción ( el valor del atributo data-tooltip ) de "hidaldo" aparezca cada vez que el usuario pase con el ratón por encima de la palabra ( hover ). Para esto construimos un pseudo-elememto ::before que contenga esta descripción.

[data-tooltip]::before {
   content : attr(data-tooltip);
   display:none;
   position: absolute;
  }

El contenido ( content ) de este pseudo-elemento es el valor del atributo data-tooltip.
El display de la descripción emergente es none, ya que tiene que aparecer solo cuando el usuario pasa con el ratón por encima del elemento <span>.
La posición es position: absolute; ya que queremos que flote por encima del texto. Las demás reglas de estilo dependen del gusto de cada uno.

Al pasar por encima el display del pseudoelemento ::before cambia a block, y el pseudo-elemento ::before aparece.

[data-tooltip]:hover::before {
   display : block;
   }

Utilizamos el el pseudo-elemento ::after para dibujar aquel triangulito que apunta hacia la palabra, y le damos casi el mismo estilo que a ::before.

Cómo dibujar un triangulo utilizando CSS

[data-tooltip]{ 
position:relative; 
border-bottom: 1px dotted #09C;
cursor:pointer;
}
[data-tooltip]::before {
content : attr(data-tooltip);
background-color:rgba(0,0,0,.75);
color:white;
-webkit-font-smoothing: antialiased;
width:150px;
padding:10px;
height:auto;
border-radius:3px;
display:none;
position:absolute;
bottom:25px;
left:calc(100% - 75%);
pointer-events: none;
z-index:99;
 }
[data-tooltip]::after{
content:"";
height:1px;
width:1px;
border:10px solid transparent;
border-top-color:rgba(0,0,0,.75);
position:absolute;
bottom:4px;
left:50%;
display: none;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after
{ display:block;} 

Descripciones emergentes animadas

En el CSS3 podemos animar los elementos HTML y no estaría nada mal animar a las descripciones emergentes, para que no aparezcan así de repente. Por lástima la propiedad display no es animable, en cambio la propiedad opacity ( opacidad ) sí que lo es, asi que tenemos que hacer algunos cambios:

.animado [data-tooltip]::before {
display:block;
opacity:0;
pointer-events: none;
}
.animado [data-tooltip]::after{
opacity:0;
pointer-events: none;
}

La propiedad pointer-events – nueva en CSS3 – permite controlar como se comportan los elementos html respecto a los eventos del ratón.
En nuestro caso, el pseudo-elemento ::before es hijo de <span data-tooltip...>, y aunque totalmente transparente, al pasar con el ratón por encima, hace iniciar la animación demasiado lejos de la palabra. Para que esto no pase utilizamos pointer-events: none, para inhabilitar los eventos del ratón encima del pseudo-elemento.

En este momento la propiedad pointer-events está bien soportada en los principals navegadores.
Lea este articulo CSS-tricks: pointer-events

Para animar la opacidad de los pseudo-elementos ::before y ::after utilizamos dos fotogramas @keyframes que animan la opacidad de 0 ( totalmente transparente ) a 1 ( totalmente opaco ).
La animación dura 1 segundo ( animation-duration: 1s; ).

/* define la animación */ 
.animado [data-tooltip]:hover::before,
.animado [data-tooltip]:hover::after {
    animation-name: toolTip;
    animation-duration: 1s;
}
/* define las fotogramas de la animación*/
@keyframes toolTip {
  0%   {opacity:0;}
  100% {opacity:1;}
  }

En producción tenemos que utilizar prefijos!!!

Al final, muy importante: una regla más: cuando la animación acabe, la opacidad de los dos pseudo-elementos ::before y ::after tiene que ser opacity:1. De otra manera la descripción emergente vuelve de nuevo transparente.

.animado [data-tooltip]:hover::before,
.animado [data-tooltip]:hover::after
{opacity:1;}