Iris CSS uses variables for every value.
``` ## Placement The tooltip sits above by default. `data-placement` moves it to the `right`, `bottom` or `left`. ```html ``` ## Accessibility The tooltip text is drawn with CSS, and screen readers read it as part of the element's name, so `` is announced as "Save file Save". Keep it short and extra, and put anything the user needs in the label itself, for example with `aria-label` on an icon button. The pointer can move onto the tooltip without closing it, but `Esc` cannot close it, since that needs a script. Form fields cannot draw a tooltip, so put it on their label. `data-tooltip` is skipped on elements that draw their own icon or spinner: busy buttons, `.close`, `.nav-toggle`, `summary` and nav and step items. Use a hint popover there. ## Hint popover A `popover="hint"` element opened by `interestfor` is the richer tooltip. The browser shows it on hover and focus, closes it with `Esc` and describes the button with it for screen readers. It is anchored to the button, flips away from the edge of the screen and is never clipped. `data-placement` works the same. Browsers without `interestfor` do not show it yet, so keep the label enough on its own. ```html