Tooltips are used to annotate, but are not the main attraction in a UI. Tooltips can provide additional help context, but shouldn't include critical information. When using tooltips, the best approach is to assume that the tooltip content will never be read.

- Tooltips should utilize minimal content.
- No critical information should be included within a tooltip
- If there needs to be any interactivity, please use a dialog.

```jsx
import IconButton from '../button/icon-button';
const [icon, setIcon] = React.useState("heart-outline");
const heartMatches = (a, b) => icon === 'heart-solid' ? a : b;
const handleClick = () => {
  setIcon(heartMatches('heart-outline', 'heart-solid'))
};

const className = heartMatches('text-red-500 focus:text-red-500', 'text-gray-800');

const label = heartMatches("You liked this", "Like this");

<Tooltip label={label}>
  <IconButton
    className={className}
    icon={icon}
    label={label}
    onClick={handleClick}
  />
</Tooltip>
```

### Resources on tooltip usage
- [Tooltips in the time of WCAG 2.1](https://sarahmhigley.com/writing/tooltips-in-wcag-21/)
- [Tooltips for interactions](https://pressbooks.library.ryerson.ca/wafd/chapter/tooltips/)
- [Inclusive component's tooltips and toggletips](https://inclusive-components.design/tooltips-toggletips/)