Responsive CSS Tooltip

Problem Statement

Tooltips are contextual popup bubbles that display details when users hover or focus on a button. Despite their simplicity, developers often fail to:

1. Position the tooltip bubble correctly relative to the trigger.
2. Provide smooth CSS animations that avoid rendering layout jumps.
3. Wire up accessibility relationships (so screen readers know the button is described by the tooltip popup).

We need to build a responsive, dynamically positioned CSS Tooltip component.

Requirements

Functional

• Anchor Mechanics: The tooltip bubble must anchor to the trigger element (the container button).
• Multiple Positions: Support four configurations: top, bottom, left, and right.
• Smooth Entry Animation: Animate the tooltip into view on hover/focus using CSS opacity and transform (scale up or slide).
• ARIA Semantic Attributes:
  • Set role="tooltip" on the popup bubble.
  • Define aria-describedby on the button trigger pointing to the tooltip container's unique id.
  • Ensure the tooltip is visible when the button gains focus (:focus-within or focus state tracking), not just on mouse hover, to support keyboard-only users.

Non-Functional

• Use GPU-accelerated CSS properties (transform, opacity) for transitions to avoid browser repaint and layout calculations.
• Do not allow the tooltip wrapper to overflow the viewport where possible.

Concepts Tested

• CSS absolute positioning (top, left, right, bottom, transform: translate).
• CSS animations and hardware-accelerated transitions.
• ARIA description relationships.