You can create simple tooltips using the ::before or ::after pseudo-elements to display additional information when a user hovers over an element. The pseudo-element contains the tooltip text and is styled to appear above or beside the target element.

Key Points

1
Tooltips are often created using ::after with the content property to insert text.
2
Use position: absolute for the pseudo-element and position: relative on the parent to control placement.
3
Control visibility with opacity, visibility, or transform and trigger it using the parent's :hover pseudo-class.
4
Pseudo-elements are ideal for decorative or informational tooltips without extra HTML elements.

Example: Tooltip with ::after

In this example, the tooltip text is displayed above the .tooltip element when the user hovers over it. The ::after pseudo-element is styled with positioning, background, and transition effects to create a smooth tooltip experience.

Best Practices

1
Use pseudo-elements for tooltips that are purely informational or decorative.
2
Ensure sufficient contrast between tooltip text and background for readability.
3
Combine with transitions for smooth appearance and disappearance effects.
4
Avoid using pseudo-elements for tooltips requiring interactive content or complex HTML.

Difficulty: 3/10

Topics: pseudo-elements, CSS tooltip implementation, hover states

Scenario Questions

0-2 years experience

1
How would you create a simple tooltip that appears when someone hovers over a button using only CSS pseudo-elements?
2
What happens if you forget to set position: relative on the button when using ::after for a tooltip?

2-5 years experience

1
A tooltip we built with ::before breaks when the page is zoomed — what could be causing it, and how would you debug it?
2
We’re using pseudo-elements for tooltips across our app, but they’re overlapping with dropdown menus — how would you fix this without changing the HTML structure?

5-8 years experience

1
How would you design a scalable tooltip system using pseudo-elements that works across 50+ components with varying container constraints and responsive breakpoints?
2
We’re seeing layout shifts when tooltips appear — how would you optimize for CLS and ensure smooth rendering without JavaScript?

8+ years experience

1
Our legacy UI uses inline JS tooltips — how would you architect a migration to CSS pseudo-element tooltips without breaking accessibility or analytics tracking?
2
If we need to support RTL, dynamic font scaling, and high-contrast modes in our tooltip system, what architectural decisions would you make to future-proof it across teams?

Follow-up Questions

❓What happens if the tooltip text is too long for the viewport?
❓How would you make this work on touch devices?
❓Why not use aria-describedby instead?