How to Create Tooltip Using ::before and ::after in CSS

You can create a tooltip in CSS by using the ::before or ::after pseudo-elements to add the tooltip text and style it to appear on hover. Position the tooltip text absolutely relative to the parent and control its visibility with opacity and visibility properties triggered by the hover state.

Syntax

The ::before and ::after pseudo-elements let you insert content before or after an element's content. For tooltips, you usually add the tooltip text in content property inside these pseudo-elements.

• content: The text or symbol shown in the tooltip.
• position: Usually absolute to place the tooltip near the element.
• opacity & visibility: Used to show or hide the tooltip smoothly.
• transition: Adds smooth fade effect on hover.

css

selector::before {
  content: "Tooltip text";
  position: absolute;
  bottom: 100%; /* places above the element */
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 0.5rem;
  border-radius: 0.3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
}

selector:hover::before {
  opacity: 1;
  visibility: visible;
}

Example

This example shows a button with a tooltip that appears above it when you hover. The tooltip uses ::before to display the text and is styled with a black background and white text.

css

button {
  position: relative;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

button::before {
  content: "Click me to submit";
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 0.4rem 0.7rem;
  border-radius: 0.3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
  font-size: 0.85rem;
  z-index: 10;
}

button:hover::before {
  opacity: 1;
  visibility: visible;
}

Output

<button>Hover me</button>

Common Pitfalls

• Not setting position: relative on the parent element causes the tooltip to position incorrectly.
• Forgetting pointer-events: none on the tooltip can block mouse events on the element.
• Not using opacity and visibility together can cause flickering or tooltips staying visible.
• Using content without quotes or with empty string will not show any tooltip text.

css

/* Wrong: Missing position on parent */
span::before {
  content: "Tooltip";
  position: absolute;
  opacity: 1;
}

/* Right: Add position relative on parent */
span {
  position: relative;
}
span::before {
  content: "Tooltip";
  position: absolute;
  opacity: 1;
}

Quick Reference

Remember these key points when creating tooltips with ::before and ::after:

• Set position: relative on the parent element.
• Use content property with quoted text.
• Position tooltip absolutely near the parent.
• Control visibility with opacity and visibility.
• Use pointer-events: none to avoid blocking mouse actions.

Key Takeaways

Use ::before or ::after with content and absolute positioning to create tooltips.

Always set position: relative on the parent element for correct tooltip placement.

Control tooltip visibility with opacity and visibility for smooth hover effects.

Add pointer-events: none to tooltip to avoid blocking mouse interactions.

Use white-space: nowrap to keep tooltip text on one line.