# Toggletip A small round key beside a label that, when pressed, hangs a sentence or two about it on a label plate and says them aloud. The tooltip names a key on hover and never opens on touch; a toggletip is for words a person may need to read before they choose, so it opens on a press, on a phone as on a desk, and stays until it is pressed again, Escape is pressed, a press lands outside it or focus moves on. The note is written into a polite status line as it opens, so a screen reader hears it once. Without the script the note is printed in place after the label. Kit part · Free · https://tactileui.dev/parts/toggletip - Element: `` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Covers: Toggletip, Info tip - Categories: Tooltips - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### The info mark · open ```html
``` ### The question mark · icon="question" ```html
A seat is one person who can sign in. Guests who only read shared pages need no seat.
``` ### Below its key · side="bottom" ```html
``` ### Beside its key · side="right" ```html
Retention
``` ### Beside a heading ```html
Two-step sign inAfter your password you type a six-digit code from your phone. It stops anyone who has only your password.
``` ## Every state - At rest - Hover - Focus - Open - Without script Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real. ## API | Name | Kind | Values | What it does | | - | - | - | - | | tui-toggletip | element | — | Draws the round key, the plate and a status line from the words inside it, and opens the plate on a press. One is open at a time. | | label | attribute | text · “More information” | The key’s name for a screen reader: say what the note is about (“About the billing day”), not “Info”. | | icon | attribute | info · question · info | The mark on the key: the info mark for an explanation, the question mark for an answer. | | side | attribute | top · bottom · right · left · top | Where the plate hangs. It flips to the other side, or slides along, to stay on screen, and never covers its key. | | open · show() · hide() · toggle() | property · method | boolean | Open or close it from a script. | | note | property | text | The words. Setting it changes them, and an open note says the new words. | | key | property | button | The round key, for a page that wants to focus it. | | tui-toggletip | event | detail { open } | Fires as it opens and closes, and bubbles. | | toggletipName() · toggletipNote() · toggletipHTML() | function | pure | The key’s name, the note as one line, and the element as markup (static draws it open, for a specimen). | | .tui-toggletip__key · .tui-toggletip__card | class | drawn | The key (22px, with a 44px press) and the plate. | ## Markup ```html Your card is charged on this day each month. A change counts from the next bill. A seat is one person who can sign in. ``` ```js import '/kit/kit.mjs'; const tip = document.querySelector('tui-toggletip'); tip.show(); // or tip.open = true tip.hide(); tip.note = 'Charged on the 1st.'; // new words; an open note says them again tip.addEventListener('tui-toggletip', (e) => console.log(e.detail.open)); ``` The demo on the page: ```html
Northwind Studio · Billing
Your card is charged on this day each month. A change counts from the next bill, never the one already running.
Invoices go to this address as PDFs. A shared inbox for your accounts team works well.
A seat is one person who can sign in. Guests who only read shared pages need no seat.
We email you when the month’s use passes 80% of your plan, and again at 100%. Nothing is charged without asking.
``` ## Usage notes Press a round key: its note hangs beside it on a label plate and a screen reader hears it once. Press it again, press Escape or press anywhere else to put it away; tab on and it goes too. On a phone it opens just the same, where a tooltip never would. ## Accessibility - The key is a real `button` with `aria-expanded`, named by `label`; Enter and Space open and close it, as a press does. - The plate is decoration for the eyes (`aria-hidden`): the note is written into a `role="status"` line a moment after it opens, so a screen reader says it once, politely, and it is taken out again as the plate closes. - Escape closes it and keeps focus on the key; tabbing on, or a press anywhere else, closes it too. Nothing inside it takes focus, so it holds no link and no key: what needs a press belongs in a popover. - It opens on a press, so it works with touch, a switch or voice control the same as with a mouse; the key is drawn at 22px beside a label, but its press is 44px across. - The plate is the tooltip’s contrast plate, so the words hold the kit’s contrast in every finish and both volumes. Its fade is the only motion, and reduced motion leaves it out. ## How it’s built The key is the kit’s round icon key, small, with the icon set’s info or question mark, and it stays down while the note is out. The plate is the tooltip’s label plate grown to a sentence or two, with its printed rule and its tab, placed by the popover’s own placement so it flips and slides like every card in the kit. It sits in the top layer as a manual popover, so no box clips it. No colour is added. ## Rules A press-to-read note beside a label: a sentence or two that explains a setting, said aloud as it opens. The full rules are in `toggletip.rules.md` in the brain, which ships with the Kit. ## Related parts - [Tooltip](https://tactileui.dev/parts/tooltip): A few words on a small label plate, the kind riveted beside a control on a rack: printed in the contrast colours with a rule just inside its edge and a short tab aimed at its key. It comes up when a pointer rests on the key or the keyboard reaches it, is read by a screen reader, and goes on Escape. - [Popover](https://tactileui.dev/parts/popover): A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it. - [Hover card](https://tactileui.dev/parts/hover-card): A preview that hangs from a link when the pointer rests on it or the keyboard reaches it. The popover’s card and leader, opened by a short delay and put away by leaving. - [Icon key](https://tactileui.dev/parts/icon-key): A key with an icon and no words, square or round: transport, power, the small tools. Its aria-label names it; a tip shows the name. - [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.