Tooltip

1const BasicTooltip = () => (
2  <Tooltip label="Rectangle">
3    <button type="button">Rect</button>
4  </Tooltip>
5);
6
7render(<BasicTooltip />);

1const TooltipSides = () => (
2  <div style={{ display: "flex", gap: "1.5rem", padding: "3rem" }}>
3    <Tooltip label="Above" side="top">
4      <button type="button">Top</button>
5    </Tooltip>
6    <Tooltip label="To the right" side="right">
7      <button type="button">Right</button>
8    </Tooltip>
9    <Tooltip label="Below" side="bottom">
10      <button type="button">Bottom</button>
11    </Tooltip>
12    <Tooltip label="To the left" side="left">
13      <button type="button">Left</button>
14    </Tooltip>
15  </div>
16);
17
18render(<TooltipSides />);

1const DisabledTrigger = () => (
2  <Tooltip label="You do not have permission to edit roads" side="right">
3    <button type="button" disabled>
4      Road
5    </button>
6  </Tooltip>
7);
8
9render(<DisabledTrigger />);