Tooltip

The tooltip component provides brief, contextual information. Its purpose is to offer additional clarification, instructions, or descriptions without cluttering the interface.

Sizes

large

small

Variants

tooltip: top

tooltip: bottom

tooltip: left

tooltip: right

Positions

The arrow may shift from bottom to top and to the left, middle or right side depending on the location of the related elements.

Top positions

top: left
top: center
top: right

Bottom positions

bottom: left
bottom: center
bottom: right

Left positions

left: top
left: center
left: right

Right positions

right: top
right: center
right: right

Appearance and Dismissal

Tooltip on text / icon

   ℹ️