Kurzinfo beim Bewegen des Mauszeigers einblenden

Webfunktionen: Interest Invokers Popover popover="hint" Ankerpositionierung

Nutzer erwarten, dass sie zusätzliche relevante Informationen sehen, ohne den Kontext vollständig zu ändern. Wenn ein Nutzer an weiteren Informationen interessiert ist, kann es hilfreich sein, eine Kurzinfo einzublenden, um einen Begriff zu definieren, die Aktion einer Schaltfläche mit Symbol zu erläutern oder zusätzliche Hinweise zu Formularfeldern zu geben.

Kurzinfo erstellen

Sie können ein Popover mit dem erforderlichen Verhalten erstellen, indem Sie das Attribut popover="hint" einem <div>- oder einem anderen semantisch geeigneten Element hinzufügen. Wenn der Nutzer den Kurzinfo öffnet, werden andere popover="hint"-Kurzinfos ausgeblendet, aber keine auto- oder manual-Kurzinfos. Außerdem werden verschachtelte Kurzinfos geschlossen.

Außerdem wird ein einfaches Schließen ermöglicht. Wenn ein Nutzer also außerhalb des Pop-overs klickt oder den Fokus anderweitig außerhalb des Pop-overs setzt, wird es geschlossen.

Das Kurzinfo-Element muss ein id-Attribut mit einem eindeutigen Wert haben:

<!-- MANDATORY: The tooltip container `<div>` must have a `popover` attribute.
     the value of `"hint"` ensures it can be "light dismissed". -->
<div popover="hint" id="tooltip">Tooltip content</div>

Ein Nutzer bekundet Interesse an den zusätzlichen Informationen, indem er den Mauszeiger auf ein <a>- oder <button>-Element bewegt oder es fokussiert. Das Element muss ein interestfor-Attribut haben, das mit dem id-Attribut des Kurzinfos übereinstimmt.

<!-- The `interestfor` attribute can be applied to a `<button>` element: -->
<button interestfor="tooltip">Tooltip trigger</button>

<!-- The `interestfor` attribute can also be applied to an `<a>` element: -->
<a interestfor="tooltip" href="">Tooltip trigger</a>

Der Trigger muss einen visuellen Indikator haben, der darauf hinweist, dass durch Interaktion mit dem Trigger zusätzliche Informationen verfügbar sind.

Integrierte Bedienungshilfen für interestfor

Wenn Sie interestfor verwenden, übernimmt der Browser die Verknüpfung mit der Hilfstechnologie für Sie:

  • Implizite Semantik: Ein Ziel mit popover="hint" erhält eine implizite Mindestrolle von tooltip. Legen Sie role="tooltip" NICHT selbst fest.
  • Implizite Verknüpfung: Der Browser verknüpft das Quellelement implizit mit dem Ziel über aria-describedby, wenn das Ziel Klartext ist, oder über aria-details, wenn das Ziel interaktive Inhalte enthält. Fügen Sie dem Trigger NICHT aria-describedby oder aria-details hinzu.
  • Interaktive Inhalte: Da die Verknüpfung bei Bedarf zu aria-details wechselt, darf das Ziel interaktive Inhalte enthalten (z.B. einen Link in einer „Interessenkarte“).

Einschränkungen der Barrierefreiheit (WCAG 1.4.13)

Auch wenn interestfor die oben genannten semantischen Anforderungen erfüllt, MUSS Ihre Implementierung die WCAG 1.4.13 (Eingeblendete Inhalte) erfüllen:

  • Schließbar: Nutzer müssen die Kurzinfo schließen können, ohne den Mauszeiger oder den Tastaturfokus zu bewegen (z.B. durch Drücken der Escape-Taste). Das native popover-Attribut verwaltet diese Bindung automatisch.
  • Mit dem Mauszeiger erreichbar: Der Mauszeiger muss sich über den Inhalt der Kurzinfo bewegen können, ohne dass die Kurzinfo verschwindet. So können Nutzer mit Vergrößerungstools den Kurzinfotext problemlos lesen.
  • Dauerhaft: Die Kurzinfo muss sichtbar bleiben, bis der Hover- oder Fokustrigger entfernt wird, der Nutzer sie explizit schließt oder ihr Inhalt nicht mehr gültig ist.

Kurzinfo positionieren

Der Kurzinfo wird mithilfe der CSS-Ankerpositionierung positioniert. Wenn die Kurzinfo mit interestfor geöffnet wird, wird das Triggerelement automatisch zu einem impliziten Anker für das Popover.

In modernen Browsern, die die native Ankerpositionierung unterstützen, müssen Sie keine anchor-name für den Trigger oder position-anchor für den Kurzinfo definieren. Sie können die Kurzinfo mit position-area direkt relativ zu ihrem impliziten Anker positionieren und die Kollisionsumkehr mit position-try-fallbacks verarbeiten:

[popover] {
  /* Implicit anchor from interestfor: no anchor-name or position-anchor needed */
  position-area: top;
  position-try-fallbacks: flip-block;
  margin: unset;
}

Fallback-Strategien

Fallbacks und Browserunterstützung für Interest Invoker

Interest Invokers müssen bedingt mit dem Polyfill-Paket interestfor von NPM polyfilled werden. Bündeln Sie das Polyfill, anstatt das CDN zu verwenden.

OBLIGATORISCH: Prüfen Sie, ob die Funktion unterstützt wird, indem Sie nach dem Attribut interestForElement in HTMLButtonElement.prototype suchen. Laden Sie das Polyfill nur, wenn die native Unterstützung fehlt.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

Einschränkungen bei CSS-Polyfills

Wenn Sie das Polyfill verwenden, ändert sich die CSS API geringfügig, um die fehlende Unterstützung für native Pseudoklassen und Attribute zu berücksichtigen:

  • Pseudoklassen: Das Polyfill kann keine echten :interest-source- und :interest-target-Pseudoklassen definieren. Stattdessen werden die Klassen .interest-source und .interest-target angewendet. OBLIGATORISCH: Kombinieren Sie sie mit :is(), um sowohl native als auch Polyfill-Zustände zu unterstützen.
/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }
  • CSS-Eigenschaften: Für interest-delay, interest-delay-start und interest-delay-end erfordert das Polyfill die Verwendung von CSS-Variablen, da es die benutzerdefinierten Eigenschaften nicht in allen Browsern direkt lesen kann.
/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}

Fallbacks und Browserunterstützung für Popover

Die Popover API ist größtenteils eine progressive Verbesserung, aber ihre definierenden Verhaltensweisen – die Hochstufung auf die oberste Ebene, das Schließen durch Klicken außerhalb des Popovers und der Aufruf von popovertarget – haben kein CSS-Äquivalent. Ältere Browser benötigen ein Polyfill oder ein manuelles Fallback, wenn Sie kein Polyfill bereitstellen möchten.

Polyfill: Damit das Attribut popover in älteren Browsern unterstützt wird, lade @oddbird/popover-polyfill bedingt. OBLIGATORISCH: Prüfe, ob die Funktion unterstützt wird, indem du nach der Property popover in HTMLElement.prototype suchst, und lade das Polyfill nur, wenn die native Unterstützung fehlt. Lade es NICHT bedingungslos.

Mit einem Bundler oder einer Importzuordnung:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Ohne Bundler importieren Sie aus einem CDN in einem <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

Einschränkung beim Styling: Das Polyfill kann die echte Pseudoklasse :popover-open nicht definieren, daher wird stattdessen die Klasse .\:popover-open angewendet. OBLIGATORISCH: Kombinieren Sie die beiden mit :is() oder :where(). Andernfalls verwerfen Browser, die :popover-open nicht unterstützen, die gesamte Regel:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

Alternativ können Sie für einen Legacy-Fallback ohne Polyfill position: fixed verwenden und die Koordinaten manuell über getBoundingClientRect() berechnen oder die Standardpositionierung mit inset: auto verwenden, wenn das für den Anwendungsfall akzeptabel ist.

Die popover-polyfill-Bibliothek bietet kein Polyfill für das Hinweisverhalten in Browsern, die popover, aber nicht popover="hint" unterstützen. In diesen Browsern bleibt eine über den Fokus geöffnete Kurzinfo möglicherweise geöffnet, wenn eine zweite Kurzinfo über den Mauszeiger geöffnet wird.

Wenn Sie Browser ohne Ankerpositionierung unterstützen möchten, können Sie das @oddbird/css-anchor-positioning-Polyfill verwenden. Alternativ können Sie mit @supports eine Fallback-Position angeben.

Wenn Sie das Polyfill @oddbird/css-anchor-positioning für die Unterstützung älterer Browser verwenden, beachten Sie, dass das Polyfill keine impliziten Anker oder position-area für Popovers unterstützt. Legen Sie explizit ein anchor-name für den Trigger und ein position-anchor für das Popover fest und positionieren Sie es mit anchor()-Inset-Funktionen anstelle von position-area: 

<!-- MANDATORY: Conditionally install the anchor positioning polyfill -->
<script type="module">
  if (!("anchorName" in document.documentElement.style)) {
    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

button[interestfor="tooltip-attrs"] {
  /* MANDATORY: Each trigger and popover pair must have a unique anchor name, referenced by `anchor-name` on the trigger and `position-anchor` on the popover. */
  anchor-name: --tooltip-attrs;
}
#tooltip-attrs {
  position-anchor: --tooltip-attrs;
  /* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions, and not `position-area. */
  top: anchor(bottom);
  left: anchor(right);
  margin: unset;
}