Tooltip

A popup that displays information related to an element when hovered or focused.

Default

Positions

Use the side prop to control where the tooltip appears.

Positions

    <.tooltip id="top" tooltip="Top" side="top">
  <.button>Top</.button>
</.tooltip>
<.tooltip id="bottom" tooltip="Bottom" side="bottom">
  <.button>Bottom</.button>
</.tooltip>
<.tooltip id="left" tooltip="Left" side="left">
  <.button>Left</.button>
</.tooltip>
<.tooltip id="right" tooltip="Right" side="right">
  <.button>Right</.button>
</.tooltip>
  

Auto Position

Use side="auto" for dynamic positioning that adjusts based on viewport boundaries.

Auto Position

On Icons

Tooltips are commonly used with icon buttons to provide context.

Icon Buttons

Alignment

Use the align prop to control tooltip alignment.

Alignment

    <.tooltip id="start" tooltip="Start" align="start">
  <.button>Start</.button>
</.tooltip>
<.tooltip id="center" tooltip="Center" align="center">
  <.button>Center</.button>
</.tooltip>
<.tooltip id="end" tooltip="End" align="end">
  <.button>End</.button>
</.tooltip>
  

With Keyboard Shortcut

Combine tooltip text with keyboard shortcuts.

With Shortcut

Accessibility

Tooltips are triggered by both mouse hover and keyboard focus, making them accessible to keyboard users. However, critical information should not be placed solely in tooltips as they may not be accessible to all users.

    <.tooltip id="help-tooltip" tooltip="Additional help text">
  <.button>Help</.button>
</.tooltip>
  