Tooltip
A short tip that appears when an element is hovered or focused.
{ui tooltip, text: 'Save your changes'}
{ui button, title: 'Save', variant: 'outline' /}
{/ui}
The tooltip wraps an element and shows text above it. It appears on hover and when anything inside has keyboard focus, so a button reached with Tab shows its tip too. It is CSS alone, with no script and no positioning library.
The tip is an extra hint. A control still needs its own accessible name, and anything the reader must know belongs in the page text, not only in a tip that touch screens cannot hover.
{ui tooltip, text: 'Below the button', side: 'bottom'}
{ui button, title: 'Hover or focus me', variant: 'outline' /}
{/ui}
side: 'bottom' puts the tip under the element, for one near the top of the page. The tip does not move to avoid the screen edge, so keep it short next to an edge.
Passwords are stored as hashes A one-way hash, never the password itself .
<p>
Passwords are stored as {ui tooltip, text: 'A one-way hash, never the password itself', label: 'hashes' /}.
</p>
Pass label instead of content for a word in a sentence. The text is not focusable, so a tip on plain text shows on hover only.
Params
| Param | Default | Description |
|---|---|---|
| text | '' | the tip |
| label | null | the element it points at, as a string; leave out to put your own element in the tag |
| side | null | bottom puts the tip below instead of above |
| class | '' | added to tooltip |
| attrs | [] | any other attributes, e.g. ['id' => 'help'] |