DEV Community

Cover image for Diseñar un tooltip con HTML y CSS
Máximo Nahim
Máximo Nahim

Posted on

Diseñar un tooltip con HTML y CSS

Introducción

Hola de nuevo 👋, en este post te quiero enseñar a diseñar un elemento muy común que puedes agregar a tu página web, solo con HTML y CSS, el “TOOLTIP” este elemento es un pequeño globo flotante que tiene una descripción acerca de un elemento al que por lo general se le hace un hover. Una vez entendido esto prepárate una taza de café, abre tu edito y empecemos.

HTML

Bien empecemos con el HTML:

<p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
        <span class="tooltip-container">
            <span class="tooltip-description">Add a brief description for the word.</span>
            <span class="tooltip-element">Culpa</span>
        </span>
    aliquam maxime cum dolorum facere adipisci aspernatur, laudantium ratione rem repellat? Nisi quis temporibus quisquam velit assumenda sapiente sequi quasi aspernatur.
</p>
Enter fullscreen mode Exit fullscreen mode

Creamos un párrafo y dentro de este encerramos una palabra o palabras dentro de un span que tiene la clase tooltip-container luego dentro de este agregamos una descripción con un span con la clase tooltip-description y por último la palabra o elemento que al hacerle hover aparecerá el tooltip, es el span con la clase tooltip-element.

HTML del tooltip

CSS

Por el momento es una página HTML cruda, sin estilo ni agregados. Ahora le pasemos a dar estilo. Acuérdense de enlazar el el HTML con el CSS.

/*Estilos generales*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

* {
    font-family: 'Josefin Sans', sans-serif;
}

body {
    background-color: #fefefe;
}

p {
    padding: 15px 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px #111;
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

Primero le agregue estilos generales y la página se debería estar viendo así:

Estilos generales de la página

Ahora si los estilos para el tooltip:

/*Estilos del tooltip*/

.tooltip-container {
    position: relative;
    display: inline;
    z-index: 300;
}

.tooltip-description {
    width: 160px; /*Puedes cambiarlo a gusto*/
    padding: 10px;
    border-radius: 10px;
    text-align: left;

    background-color: #ff6961;
    color: #fff;
    box-shadow: 0 0 17px #111;

    /*Lo posicionamos en el centro del elemento y lo ponemos por encima*/
    position: absolute;
    bottom: 160%;
    left: 50%;
    transform: translate(-50%, 0%);

    transition: all 500ms ease-in;
}
Enter fullscreen mode Exit fullscreen mode

Por el momento te debería estar quedando así:

Tooltip description

Pequeño detalle que marca la diferencia

Ahora vamos a agregar un pequeño detalle que marcara la diferencia, bueno no tanto, pero queda muy bien

/*El pequeño detalle*/
.tooltip-description::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: #ff6961;

    position: absolute;
    bottom: -7.5px;
    left: 50%;
    transform: translate(-50%, 0%) rotate(45deg);
}
Enter fullscreen mode Exit fullscreen mode

El tooltip-description te debería quedar algo así:

Image description

Recta final

Por último vamos a dar estilos al tooltip-element y agregamos los efectos de hover

/*Recta final*/
.tooltip-element {
    color: #c63637;
    font-weight: 800;
}

/*Efectos hover*/
.tooltip-container:hover .tooltip-description {
    visibility: visible;
    opacity: 1;
}

.tooltip-container:hover .tooltip-element {
    text-decoration: underline;
}

/*Y al elemento .tooltip-description le agregue
 un opacity: 0; y un visibility: hidden;*/
.tooltip-description {
    visibility: hidden; /*Agregado*/
    opacity: 0; /*Agregado*/

    width: 160px; /*Puedes cambiarlo a gusto*/
    padding: 10px;
    border-radius: 10px;
    text-align: left;

    background-color: #ff6961;
    color: #fff;
    box-shadow: 0 0 17px #111;

    /*Lo posicionamos en el centro del elemento y lo ponemos por encima*/
    position: absolute;
    bottom: 160%;
    left: 50%;
    transform: translate(-50%, 0%);

    transition: all 500ms ease-in;
}

Enter fullscreen mode Exit fullscreen mode

El resultado final sería este:

Pasa el cursor sobre la palabra con color o tocala si es que estas en celular

Fin

Bueno eso sería todo por hoy esepero que te haya gustado este diseño de tooltip con HTML y CSS, nos vemos en luego 👋 para otra taza de café ☕️.

Top comments (1)

Collapse
 
maxic0de profile image
Máximo Nahim

Cualquier duada o error comentalo así lo resolvemos juntos