Toggletip

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<label class="tui-label" for="billing-day">Billing day</label>
<tui-toggletip label="About the billing day">
  Your card is charged on this day each month. A change counts from the next bill.
</tui-toggletip>
<select class="tui-select" id="billing-day">…</select>

<!-- The question mark, and a note that hangs below its key: -->
<tui-toggletip label="What is a seat?" icon="question" side="bottom">A seat is one person who can sign in.</tui-toggletip>
<!-- It writes its own key, the plate and a status line; the words inside are the note. -->

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));

Needs kit.css and kit.mjs. How to install the kit.

• 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.

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.