Diseñar un tooltip con HTML y CSS
Tags: html, css, webdev, frontend
Published: 2023-07-01 13:56:22

### 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:

```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.


![HTML del tooltip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f13k2wmpnp43d4p76x0u.png)

### 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.

```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í:


![Estilos generales de la página](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07iqu0xjzni1j85lazjv.png)

Ahora si los estilos para el tooltip:

```css
/*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í:

![Tooltip description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiyqxh8m2jjtv3uws899.png)

### 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

```css
/*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í:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izacecl8z4t9ar23ccq3.png)

### Recta final

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

```css
/*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:
{% codepen https://codepen.io/M4xiCod3/pen/gOQWBdy %}
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é ☕️.