FMX Prototype Pipeline

Tooltip

Plain hover/focus tooltip. Wraps any trigger; placement controlled by location prop.

<Button
  variant="outline"
  tooltip="Save and close"
>
  Save
</Button>

<Button
  variant="outline"
  tooltip="Cancel changes"
  tooltipLocation="below"
>
  Cancel
</Button>

<IconButton
  icon={faCircleInfo}
  aria-label="Info"
  tooltipLocation="left"
/>

<IconButton
  icon={faGear}
  aria-label="Settings"
  tooltipLocation="right"
/>

Hover me

<Tooltip label="External hint" location="above">
  <span className="underline cursor-help">
    Hover me
  </span>
</Tooltip>

<IconButton
  icon={faCircleInfo}
  aria-label="More information"
/>

Props

label:ReactNode

Tooltip body.

location:"above" | "below" | "left" | "right"= "above"

Placement relative to the trigger.

children:ReactNode

Trigger element.

Tokens