import './TooltipExamples.css';

## Examples

### Basic


import TooltipBasic from "./TooltipBasic.tsx?raw"

<LiveExample src={TooltipBasic} />

### Tooltip react ref


import TooltipReactRef from "./TooltipReactRef.tsx?raw"

<LiveExample src={TooltipReactRef} />

### Tooltip selector ref


import TooltipSelectorRef from "./TooltipSelectorRef.tsx?raw"

<LiveExample src={TooltipSelectorRef} />

### On icon with dynamic content

When the tooltip is used as a wrapper and its content will dynamically update, the `aria` prop should have a value of "none" passed in. This prevents assistive technologies from announcing the tooltip contents more than once. Additionally, the `aria-live` prop should have a value of "polite" passed in, in order for assistive technologies to announce when the tooltip contents gets updated.

When using a React or selector ref with a tooltip that has dynamic content, the `aria` and `aria-live` props do not need to be manually passed in.


import TooltipIcon from "./TooltipIcon.tsx?raw"

<LiveExample src={TooltipIcon} />

### Options


import TooltipOptions from "./TooltipOptions.tsx?raw"

<LiveExample src={TooltipOptions} />