Componenten / Basis / Status

Tooltip

Korte uitleg bij hover en focus. Alleen aanvullend: de info staat ook elders of is niet essentieel.

BasisStatus2 instellingentooltip

Voorbeeld

Instellingen

Laden…

<span class="gx-tip gx-tip--top">
  <button class="gx-btn gx-btn--secondary gx-btn--icon" type="button" aria-describedby="tip-1" aria-label="Info">
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-10v6m0-9.5v.5"/>
    </svg>
  </button>
  <span class="gx-tip__bubble" role="tooltip" id="tip-1">Kopieer de token</span>
</span>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

Sleutel	Instelling	Waarden	Standaard
`position`	Positie	`top` `bottom`	`top`
`text`	Tekst	tekst	`Kopieer de token`

Richtlijnen

Toegankelijkheid

Opent ook bij toetsenbordfocus.
Nooit essentiële info alleen in een tooltip (mobiel heeft geen hover).

Wel

Maximaal één regel.

Niet

Links of knoppen in een tooltip.

Verwant

BadgeKorte status of categorie. Zacht, gevuld of omlijnd, met optionele stip.

LadenLaadindicator als ring, stippen of de GXJ-golflijn. Stopt bij reduced motion.

MeldingMededeling in de pagina: info, gelukt, waarschuwing of fout. Optioneel weg te klikken.

ToastKorte bevestiging na een handeling, verdwijnt na 4 seconden. Via de runtime: gx.toast('Tekst').