CSS Tooltips

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Tooltip

Basic Tooltip

Creating a tooltip that is shown when the user moves the mouse over an element:

HTML
				
					<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
CSS
				
					.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Output

Basic Tooltip

Move the mouse over the text below:

Hover over me Tooltip text

Example Explained

HTML: a container element is used (like <div>) and is added to the “tooltip” class to it. When the user mouse over this <div>, it shows the tooltip text.

The tooltip text is placed within an inline element (like <span>) with class=”tooltiptext”.

CSS: The tooltip class uses the  position:relative, that is required for the position the tooltip text (position:absolute).

The tooltiptext class uses the actual tooltip text. By default, it is hidden, and is visible on hover. Some basic styles has also been added to it: 120px width, black background color, white text color, centered text, and 5px top and bottom padding.

The CSS border-radius property adds rounded corners to the tooltip text.

The: hover selector displays the tooltip text when the user moves the mouse over the <div> with class=”tooltip”.