Sobeys Logo

Tooltip Component

The Tooltip component is a flexible and accessible hint bubble used to provide contextual information when a user hovers over, focuses, or interacts with an element. It enhances UI/UX by showing non-intrusive inline help, descriptions, or hints.

This component supports multiple directions, optional arrows, keyboard accessibility, and customizable styling.

Key Features

  • Custom Positioning
  • Directional Arrows
  • Smart Class Variants
  • Composable Children
  • Keyboard Accessible
  • Customizable
  • Lightweight

Tooltip Demo

Left
Right