# Tooltip · MIAN

Short labels on hover and focus. Pure CSS; the text is a real element referenced by aria-describedby.

- Id: `tooltip` · Category: Overlays · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/tooltip
- Use for: tooltip, hover hint, icon label.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-tooltip`: Wrapper around the trigger and a role="tooltip" element.
- `mn-tooltip-bottom · mn-tooltip-left · mn-tooltip-right`: Placement (top is default).

## Accessibility

- Link the tooltip with aria-describedby so screen readers read it. Tooltips appear on keyboard focus, not only hover. Never put essential or interactive content in a tooltip.

## Examples

### Placements

```html
<span class="mn-tooltip"><button class="mn-btn mn-btn-outline" aria-describedby="tt1">Top</button><span role="tooltip" id="tt1">Add to library</span></span>
<span class="mn-tooltip mn-tooltip-bottom"><button class="mn-btn mn-btn-outline" aria-describedby="tt2">Bottom</button><span role="tooltip" id="tt2">Opens in a new tab</span></span>
<span class="mn-tooltip mn-tooltip-right"><button class="mn-btn mn-btn-icon mn-btn-outline" aria-label="Copy" aria-describedby="tt3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></svg></button><span role="tooltip" id="tt3">Copy to clipboard</span></span>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/tooltip/source