<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>