My WebDev Notes: How to create a tooltip with HTML and CSS
Tags: html, css, webdev
Published: 2021-02-03 20:52:06

---
title: My WebDev Notes: How to create a tooltip with HTML and CSS
published: true
description: In this tutorial you'll learn how to create a tooltip with HTML and CSS
tags: html, css, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vu9q1gbker5lsojbf3xp.jpg
series: My WebDev Notes
---

## __Introduction__

A tooltip is a common graphical user interface element found on some websites. It's used to provide additional information to the user when they interact with a portion of text with their mouse or by touch. In this tutorial, you'll learn how to create it with HTML and CSS.

## __The HTML__

The tooltip text is contained within a portion of other text on a web page, most of the time, this text is a paragraph therefore,  the HTML `span` tag is used to enclose it.

```html
<!-- Do not forget the meta tags -->
<div class="tooltip">
	Hover over me <span class="tooltiptext">This is a tooltip</span>
</div>
```

## __The CSS__

In the HTML above the tooltip text is part of the flow of the text which means when it's rendered by the browser it will appear beside the text _"Hover over me"_. The desired effect is to hide the text, and show it over the text _Hover over me_ when the user interact with it.

In order to achieve this, you have to hide the tooltip text; take it out of flow before you can position it over the text: _Hover over me_.

First, you have to change the `position` property of the tooltip parent container to `relative` because when you take the tooltip text out of flow, you'll have to position it relative to its parent and not the browser's viewport. In addition, you'll add a bottom border to serve as an indication that there is an information hidden from sight.

Furthermore, the `display` property is changed to `inline-block`. This prevents the tooltip parent from spanning the entire browsers' viewport.

```css
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}
```

Now, you can position the tooltip text. Since the parent container has a position `relative`, the tooltip text can have its position set to `absolute`. Therefore, you can use offset properties to accurately position it over the text _Hover over me_. Finally, you'll like the tooltip text to appear over its parent text all the time, `z-index` takes care of this. The remaining styles are cosmetics.

```css
.tooltip .tooltiptext {
	position: absolute;
	bottom: 125%;
	left: 50%;
	visibility: hidden;
	z-index: 1;

	/* Cosmetics */
	color: #fff;
	background-color: #555;
	width: 120px;
	text-align: center;
	padding: 5px 0;
	margin-left: -60px;
	border-radius: 6px;
	opacity: 0;
	transition: opacity 1s;
}
```

In its current state, the tooltip is hidden, but before you write styles that will show it when the user interacts with it, you need to create a tiny indication that'll show the user that the tooltip text belongs to the text _Hover over me_, sort of like when a human is holding a board which reads: I am human.

In order to achieve this, you'll use CSS pseudo-elements specifically `::after`.

```css
.tooltip .tooltiptext::after {
    /* Read on for the code and explanation */
}
```

First, you set its content to _empty_, and change the position to `absolute`. Afterwards, you move the indicator to the center of the tooltip text and its parent text. Next, you use borders to create the indicators. Finally, when the user touches the text or mouse over it, you change the `visibility` and `opacity` to `visible` and `1` respectively.

```css
.tooltip .tooltiptext::after {
	position: absolute;
	content: "";

	/* Move it to the center */
	top: 100%;
	left: 50%;

	/* This creates the indicators */
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent;
}

/**
 * Show the tooltip when you mouse over the
 * tooltip container
 */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}
```

The completed tooltip is shown in the GIF below:

![A GIF of a tooltip which reads: This is a tooltip](https://dev-to-uploads.s3.amazonaws.com/i/7y9l1cjvleesupm1ar0o.gif)

You can [check it online](https://ziizium.github.io/my-webdev-notes/tooltip/).

The GitHub repo for this series:

{% github ziizium/my-webdev-notes %}

## __Credits__

Cover photo by [Ferenc Almasi on Unsplash](https://unsplash.com/@flowforfrank).