CssHow-ToBeginner · 3 min read

How to Create Tooltip in CSS: Simple Steps and Example

To create a tooltip in CSS, use a container element with a hidden child element that becomes visible on hover using the :hover selector. Position the tooltip text with position: absolute and style it for clarity and visibility.

📐

Syntax

A tooltip is created by placing the tooltip text inside a child element, usually a span or div, inside a container element. The tooltip text is hidden by default and shown when the user hovers over the container using the :hover pseudo-class.

position: relative on the container to position the tooltip relative to it.
position: absolute on the tooltip text to place it near the container.
visibility: hidden and opacity: 0 to hide the tooltip initially.
visibility: visible and opacity: 1 on hover to show the tooltip.

css

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

💻

Example

This example shows a button with a tooltip that appears above it when hovered. The tooltip text is styled with a black background and white text, centered horizontally.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Tooltip Example</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 6px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -70px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
</style>
</head>
<body>

<div class="tooltip">Hover me
  <span class="tooltip-text">This is a tooltip</span>
</div>

</body>
</html>

Output

A webpage with the text 'Hover me'. When the mouse pointer moves over this text, a black box with white text 'This is a tooltip' appears above it.

⚠️

Common Pitfalls

Common mistakes when creating CSS tooltips include:

Not setting position: relative on the container, causing the tooltip to position incorrectly.
Forgetting to hide the tooltip initially, so it shows all the time.
Not using z-index, which can cause the tooltip to appear behind other elements.
Using display: none instead of visibility and opacity, which prevents smooth fade-in effects.

css

.tooltip {
  /* Missing position: relative; */
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: visible; /* Wrong: tooltip always visible */
  position: absolute;
  background-color: black;
  color: white;
}

/* Corrected version */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  background-color: black;
  color: white;
  z-index: 1;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

📊

Quick Reference

Container: Use position: relative and display: inline-block.
Tooltip text: Use position: absolute, hidden by default with visibility: hidden and opacity: 0.
Show tooltip: On :hover, set visibility: visible and opacity: 1 with a transition for smooth effect.
Positioning: Use bottom, left, and margin-left to center the tooltip above the element.
Accessibility: Ensure tooltip text is readable with good contrast and consider keyboard focus states.

✅

Key Takeaways

Use a container with position relative and a hidden child element for the tooltip text.

Show the tooltip on hover by changing visibility and opacity with smooth transitions.

Position the tooltip absolutely relative to the container for correct placement.

Avoid common mistakes like missing positioning or always visible tooltips.

Style tooltips for readability and accessibility with good contrast and clear text.