Cómo crear un tooltip muy simple con CSS

Un tooltip proporciona información extra cuando el usuario pasa el cursor sobre un elemento. Los tooltips son una estupenda manera de mostrar información detallada al usuario al colocar el cursor sobre un texto o una imagen y ayuda a mejorar la experiencia del usuario en tu sitio web. Utilizando tooltips, puedes mostrar el título de una imagen, la descripción de un enlace y más información verdaderamente útil. Puedes crear fácilmente un tooltip con CSS sin tener que utilizar JavaScript o jQuery.

En este tutorial, te mostraremos cómo crear un tooltip para texto o imágenes utilizando puro CSS. Te proporcionaremos un pequeño snippet de código para crear una simple tooltip con CSS que aparezca cuando el usuario pose el puntero del ratón sobre un texto. Además, podrás colocarlo en diferentes posiciones (arriba, abajo, izquierda y derecha) con respecto al elemento donde lo sitúes.

Código HTML

Agrega la clase tooltip al texto junto a la clase donde quieras que aparezca (arriba o abajo o izquierda o derecha) y asigna la clase tiptext al contenido del tooltip.

<div class="tooltip top">Posa el ratón encima de mi
    <span class="tiptext">Texto del tooltip</span>
</div>

Código CSS común

El siguiente CSS sería común para todas las posiciones del tooltip.

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}

Ahora debes agregar los CSS para las posiciones.

CSS para Tooltip arriba

.tooltip.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.top .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #2E2E2E transparent transparent transparent;
}

CSS para Tooltip abajo

.tooltip.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltip.bottom .tiptext::after{
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #2E2E2E transparent;
}

CSS para Tooltip izquierda

.tooltip.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent #2E2E2E;
}

CSS para Tooltip derecha

.tooltip.right .tiptext{
    top: -5px;
    left: 110%;
}
.tooltip.right .tiptext::after{
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent #2E2E2E transparent transparent;
}

Fuente: codexworld.com