Tooltip

[W_Beto]

Buenas.

Estoy creando un tooltip y ahora tengo el problema de que no logro darle un margin-bottom o algo que levante el mensaje de acuerdo a su contenedor(intento hacerlo lo más simple posible). Les dejo el código:

Código HTML:

<p>Lorem ipsum
<span class="cont"><span id="alt" alt="Tooltip">soluta eaque accusamus</span></span>
praesentium!</p>
 

Código CSS:

#alt{
    color: blue;
    cursor: pointer;
}
 
#alt:hover:after{
    content: attr(alt);
    background-color: #000;
    color: #fff;
    position: absolute;
    padding: 5px;
    border-radius: 7px 7px 7px 0;
}
 

[pzin]

Puedes usar top, por ejemplo:

Código CSS:

#alt:hover:after {
  top: -20px;
}
 

O si quieres reutilizarlo en otro lugar, obviamente usando una clase, podrías hcaerlo algo como:

Código CSS:

.alt:hover:after {
  bottom: calc(100% + 20px);
}
 

[faillure]

Código HTML:

<p data-explicacion='Tooltip'>Lorem ipsum soluta eaque accusamus  praesentium!</p>
 

Código CSS:

p {
   position: relative; 
  /*más*/
}
p:hover:after {
   content: attr(data-explicacion);
  /*resto propiedades para posicionarlo*/
}
 

position el valor inicial es estatic y no sirve como referencia.

alt nunca lo vi aplicado a párrafos. Solo a elementos reemplazados como las imágenes (alt == texto alternativo)