Design a Tooltip Using Only HTML/CSS — No JavaScript

Problem Statement

Build a tooltip component that:

1. Appears on hover over a trigger element
2. Has a smooth fade-in transition
3. Includes an arrow/pointer pointing to the trigger
4. Can be positioned above, below, left, or right of the trigger
5. Uses only HTML and CSS — no JavaScript allowed

Requirements

• Must work with just :hover and CSS pseudo-elements
• Arrow should be created with CSS (border trick or clip-path)
• Tooltip text should be configurable via a data-tooltip attribute
• Smooth transition (opacity + transform) on show/hide
• Should not overflow the viewport (bonus: handle edge cases)

Example HTML

<span class="tooltip" data-tooltip="This is helpful info">
  Hover me
</span>

Expected CSS Approach

Use:

• ::after or ::before pseudo-element for the tooltip text
• content: attr(data-tooltip) to pull text from the attribute
• :hover to toggle visibility
• position: absolute relative to the trigger
• Border trick for the arrow

Follow-ups

1. How would you handle tooltips near the edge of the viewport without JavaScript?
2. What accessibility concerns exist with CSS-only tooltips? (hint: keyboard focus, screen readers)
3. How would you support multi-line tooltip content?
4. What's the performance difference between visibility: hidden vs display: none for the hidden state?