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>
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.
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;
}
Primero le agregue estilos generales y la página se debería estar viendo así:
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;
}
Por el momento te debería estar quedando así:
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);
}
El tooltip-description te debería quedar algo así:
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;
}
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)
Cualquier duada o error comentalo así lo resolvemos juntos