Tooltip

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

import { Tooltip } from "@uicapsule/components";
import type { TooltipProps } from "@uicapsule/components";

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>