Tooltip

<Tooltip text="Record a message" position="top">
  {(attributes) => <Button attributes={attributes} icon={IconMic} color="primary" rounded />}
</Tooltip>

Tooltips can be added to any interactive element on the page by passing its attributes and adding the content you want to render.

<Tooltip text="Tooltip content">
  {(attributes) => <Button attributes={attributes}>Trigger</Button>}
</Tooltip>

You can define the position where you want to display the Tooltip. However, if it doesn't fit into the screen, it will automatically pick a better position that stays within the viewport.

<Tooltip text="Tooltip content" position="top-end">
  {(attributes) => <Button attributes={attributes}>Trigger</Button>}
</Tooltip>

When rendering disabled elements on the page, they will ignore all events, which will prevent Tooltip from appearing if you use it directly for that element. Instead, a good approach is to wrap your disabled element with Actionable utility rendering it as div. It will help you avoid rendering two nested buttons and automatically apply all accessibility-related attributes.

<Tooltip text="Tooltip content">
  {(attributes) => (
    <Actionable attributes={attributes} as="div">
      <Button disabled>Trigger</Button>
    </Actionable>
  )}
</Tooltip>

• It's essential to pass the attributes provided by the Tooltip component to your interactive trigger component. That way, you will ensure that all the user events and aria attributes are assigned correctly.