Komponente für die Kurzinfo erstellen

Eine grundlegende Übersicht darüber, wie Sie ein farbadaptives und barrierefreies benutzerdefiniertes Tooltip-Element erstellen.

Adam Argyle

In diesem Beitrag möchte ich meine Gedanken dazu teilen, wie man ein farbadaptives und barrierefreies benutzerdefiniertes <tool-tip>-Element erstellt. Demo ansehen und Quellcode ansehen.

Wenn du lieber ein Video ansehen möchtest, findest du hier eine YouTube-Version dieses Beitrags:

Übersicht

Ein Tooltip ist ein nicht modales, nicht blockierendes, nicht interaktives Overlay, das zusätzliche Informationen für Benutzeroberflächen enthält. Sie ist standardmäßig ausgeblendet und wird eingeblendet, wenn der Mauszeiger auf ein zugehöriges Element bewegt wird oder das Element fokussiert wird. Eine Kurzinfo kann nicht direkt ausgewählt oder verwendet werden. Tooltips sind kein Ersatz für Labels oder andere wichtige Informationen. Nutzer sollten ihre Aufgabe auch ohne Tooltip vollständig erledigen können.

Toggletip und Tooltip

Wie bei vielen Komponenten gibt es unterschiedliche Beschreibungen dafür, was ein Tooltip ist, z. B. in MDN, WAI ARIA, Sarah Higley und Inclusive Components. Mir gefällt die Trennung zwischen Tooltips und Toggletips. Ein Tooltip sollte nicht interaktive Zusatzinformationen enthalten, während ein Toggletip interaktive Elemente und wichtige Informationen enthalten kann. Der Hauptgrund für die Trennung ist die Barrierefreiheit. Wie sollen Nutzer zum Pop-up navigieren und auf die Informationen und Schaltflächen darin zugreifen können? Toggletips können schnell komplex werden.

Hier sehen Sie ein Video von der Designcember-Website, in dem ein Toggletip zu sehen ist. Es handelt sich um ein Overlay mit Interaktivität, das ein Nutzer anpinnen und erkunden und dann durch leichtes Schließen oder mit der Esc-Taste schließen kann:

Bei dieser GUI-Challenge wurde ein Tooltip verwendet, der fast ausschließlich mit CSS erstellt wurde. Hier erfahren Sie, wie das geht.

Markieren & Zeichnen

Ich habe mich für das benutzerdefinierte Element <tool-tip> entschieden. Autoren müssen benutzerdefinierte Elemente nicht in Webkomponenten umwandeln, wenn sie das nicht möchten. Der Browser behandelt <foo-bar> wie ein <div>. Sie können sich ein benutzerdefiniertes Element wie eine Klasse mit geringerer Spezifität vorstellen. Es ist kein JavaScript erforderlich.

<tool-tip>A tooltip</tool-tip>

Das ist wie ein div-Element mit etwas Text darin. Durch das Hinzufügen von [role="tooltip"] können wir auf den Barrierefreiheitsbaum von geeigneten Screenreadern zugreifen.

<tool-tip role="tooltip">A tooltip</tool-tip>

Screenreader erkennen es jetzt als Kurzinfo. Im folgenden Beispiel sehen Sie, wie das erste Link-Element ein erkanntes Tooltip-Element in seinem Baum hat und das zweite nicht. Der zweite Nutzer hat die Rolle nicht. Im Abschnitt „Stile“ werden wir diese Baumansicht verbessern.

Als Nächstes muss das Tooltip nicht fokussierbar sein. Wenn ein Screenreader die Tooltip-Rolle nicht erkennt, können Nutzer den Fokus auf <tool-tip> setzen, um den Inhalt zu lesen. Das ist aber nicht erforderlich. Screenreader hängen den Inhalt an das übergeordnete Element an. Daher ist kein Fokus erforderlich, um ihn zugänglich zu machen. Hier können wir inert verwenden, um zu verhindern, dass Nutzer diese Kurzinfo versehentlich in ihrem Tab-Ablauf finden:

<tool-tip inert role="tooltip">A tooltip</tool-tip>

Ich habe mich dann entschieden, Attribute als Schnittstelle zu verwenden, um die Position des Tooltips anzugeben. Standardmäßig wird für alle <tool-tip>s die Position „top“ angenommen. Die Position kann jedoch für ein Element angepasst werden, indem Sie tip-position hinzufügen:

<tool-tip role="tooltip" tip-position="right ">A tooltip</tool-tip>

Ich verwende für solche Dinge lieber Attribute als Klassen, damit dem <tool-tip> nicht mehrere Positionen gleichzeitig zugewiesen werden können. Es kann nur eine oder keine geben.

Platzieren Sie schließlich <tool-tip>-Elemente innerhalb des Elements, für das Sie einen Kurzinfo-Text bereitstellen möchten. Hier gebe ich den alt-Text für Nutzer mit Sehvermögen frei, indem ich ein Bild und ein <tool-tip>-Element in ein <picture>-Element einfüge:

<picture>
  <img alt="The GUI Challenges skull logo" width="100" src="...">
  <tool-tip role="tooltip" tip-position="bottom">
    The <b>GUI Challenges</b> skull logo
  </tool-tip>
</picture>

Hier platziere ich ein <tool-tip>-Element innerhalb eines <abbr>-Elements:

<p>
  The <abbr>HTML <tool-tip role="tooltip" tip-position="top">Hyper Text Markup Language</tool-tip></abbr> abbr element.
</p>

Bedienungshilfen

Da ich Tooltips und keine Toggletips erstellt habe, ist dieser Abschnitt viel einfacher. Zuerst möchte ich Ihnen erläutern, wie wir uns die Nutzererfahrung vorstellen:

1. In eingeschränkten Bereichen oder unübersichtlichen Benutzeroberflächen sollten Sie zusätzliche Mitteilungen ausblenden.
2. Wenn ein Nutzer den Mauszeiger auf ein Element bewegt, den Fokus darauf legt oder es berührt, wird die Meldung angezeigt.
3. Wenn der Mauszeiger nicht mehr auf dem Element platziert ist, der Fokus verloren geht oder die Berührung endet, wird die Meldung wieder ausgeblendet.
4. Achten Sie schließlich darauf, dass Bewegungen reduziert werden, wenn ein Nutzer eine entsprechende Einstellung angegeben hat.

Unser Ziel ist es, zusätzliche Nachrichten auf Abruf bereitzustellen. Ein Nutzer mit normalem Sehvermögen, der Maus oder Tastatur verwendet, kann mit dem Mauszeiger auf die Schaltfläche zeigen, um die Nachricht zu sehen und zu lesen. Ein Screenreader-Nutzer ohne Sehvermögen kann den Fokus darauf richten, um die Nachricht zu sehen und sie über sein Tool zu hören.

Im vorherigen Abschnitt haben wir den Barrierefreiheitsbaum, die Rolle „tooltip“ und „inert“ behandelt. Jetzt müssen wir die Funktion nur noch testen und überprüfen, ob die Nutzererfahrung angemessen ist und die Quickinfo-Nachricht dem Nutzer angezeigt wird. Beim Testen ist nicht klar, welcher Teil der hörbaren Nachricht eine Kurzinfo ist. Das ist auch beim Debuggen im Barrierefreiheitsbaum zu sehen: Der Linktext „top“ wird ohne Unterbrechung mit „Look, tooltips!“ zusammengeführt. Der Screenreader unterbricht den Text nicht und erkennt ihn nicht als QuickInfo-Inhalt.

Fügen Sie dem <tool-tip> ein Pseudo-Element hinzu, das nur für Screenreader sichtbar ist, damit wir einen eigenen Aufforderungstext für Nutzer mit Sehbehinderung hinzufügen können.

&::before {
  content: "; Has tooltip: ";
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Unten sehen Sie den aktualisierten Barrierefreiheitsbaum, der jetzt ein Semikolon nach dem Linktext und eine Aufforderung für den Tooltip „Has tooltip: “ enthält.

Wenn ein Nutzer mit einem Screenreader den Link fokussiert, wird „oben“ gesagt, es folgt eine kurze Pause und dann wird „hat Kurzinfo: Look, Tooltips“ angesagt. So erhält ein Screenreader-Nutzer einige nützliche UX-Hinweise. Durch die Pause wird eine gute Trennung zwischen dem Linktext und dem Kurzinfo-Text erreicht. Wenn „has tooltip“ angekündigt wird, kann ein Screenreader-Nutzer die Ankündigung außerdem ganz einfach abbrechen, wenn er sie bereits gehört hat. Das erinnert stark an das schnelle Bewegen des Mauszeigers über und wieder weg von einem Element, da Sie die zusätzliche Nachricht bereits gesehen haben. Das fühlte sich nach einer guten UX-Parität an.

Stile

Das <tool-tip>-Element ist ein untergeordnetes Element des Elements, für das es zusätzliche Informationen enthält. Beginnen wir also zuerst mit den Grundlagen für den Overlay-Effekt. So entfernen Sie es mit position absolute aus dem Dokumentenfluss:

tool-tip {
  position: absolute;
  z-index: 1;
}

Wenn das übergeordnete Element kein Stacking-Kontext ist, wird das Kurzinfo am nächstgelegenen Stacking-Kontext positioniert. Das ist nicht das, was wir möchten. Es gibt eine neue Auswahl im Block, die Ihnen helfen kann: :has().

:has(> tool-tip) {
  position: relative;
}

Machen Sie sich nicht zu viele Gedanken über die Browserunterstützung. Denken Sie daran, dass diese Tooltips nur ergänzend sind. Wenn sie nicht funktionieren, sollte alles in Ordnung sein. Zweitens stellen wir im JavaScript-Abschnitt ein Skript bereit, um die Funktionen zu polyfillen, die wir für Browser ohne :has()-Unterstützung benötigen.

Als Nächstes machen wir die Tooltips nicht interaktiv, damit sie keine Zeigerereignisse vom übergeordneten Element abfangen:

tool-tip {
  …
  pointer-events: none;
  user-select: none;
}

Blenden Sie dann den Tooltip mit der Deckkraft aus, damit wir ihn mit einer Überblendung einblenden können:

tool-tip {
  opacity: 0;
}

:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
  opacity: 1;
}

:is() und :has() erledigen hier die Hauptarbeit und sorgen dafür, dass tool-tip mit übergeordneten Elementen über die Nutzerinteraktion informiert wird, um die Sichtbarkeit eines untergeordneten Tooltips umzuschalten. Mausnutzer können den Mauszeiger darauf bewegen, Tastatur- und Screenreadernutzer können den Fokus darauf setzen und Touch-Nutzer können darauf tippen.

Nachdem das Ein- und Ausblenden des Overlays für Nutzer mit Sehvermögen funktioniert, ist es an der Zeit, einige Stile für das Design, die Positionierung und das Hinzufügen der Dreiecksform zur Sprechblase hinzuzufügen. In den folgenden Stilen werden benutzerdefinierte Eigenschaften verwendet. Sie bauen auf dem bisherigen Code auf, fügen aber auch Schatten, Typografie und Farben hinzu, damit der Tooltip wie ein schwebendes Element aussieht:

tool-tip {
  --_p-inline: 1.5ch;
  --_p-block: .75ch;
  --_triangle-size: 7px;
  --_bg: hsl(0 0% 20%);
  --_shadow-alpha: 50%;

  --_bottom-tip: conic-gradient(from -30deg at bottom, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) bottom / 100% 50% no-repeat;
  --_top-tip: conic-gradient(from 150deg at top, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) top / 100% 50% no-repeat;
  --_right-tip: conic-gradient(from -120deg at right, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) right / 50% 100% no-repeat;
  --_left-tip: conic-gradient(from 60deg at left, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) left / 50% 100% no-repeat;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
  transition: opacity .2s ease, transform .2s ease;

  position: absolute;
  z-index: 1;
  inline-size: max-content;
  max-inline-size: 25ch;
  text-align: start;
  font-size: 1rem;
  font-weight: normal;
  line-height: normal;
  line-height: initial;
  padding: var(--_p-block) var(--_p-inline);
  margin: 0;
  border-radius: 5px;
  background: var(--_bg);
  color: CanvasText;
  will-change: filter;
  filter:
    drop-shadow(0 3px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
    drop-shadow(0 12px 12px hsl(0 0% 0% / var(--_shadow-alpha)));
}

/* create a stacking context for elements with > tool-tips */
:has(> tool-tip) {
  position: relative;
}

/* when those parent elements have focus, hover, etc */
:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
  opacity: 1;
  transition-delay: 200ms;
}

/* prepend some prose for screen readers only */
tool-tip::before {
  content: "; Has tooltip: ";
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/* tooltip shape is a pseudo element so we can cast a shadow */
tool-tip::after {
  content: "";
  background: var(--_bg);
  position: absolute;
  z-index: -1;
  inset: 0;
  mask: var(--_tip);
}

/* top tooltip styles */
tool-tip:is(
  [tip-position="top"],
  [tip-position="block-start"],
  :not([tip-position]),
  [tip-position="bottom"],
  [tip-position="block-end"]
) {
  text-align: center;
}

Designanpassungen

Das Kurzinfo-Fenster hat nur wenige Farben, die verwaltet werden müssen, da die Textfarbe über das System-Keyword CanvasText von der Seite übernommen wird. Da wir benutzerdefinierte Eigenschaften zum Speichern der Werte erstellt haben, können wir nur diese benutzerdefinierten Eigenschaften aktualisieren und das Theme den Rest erledigen lassen:

@media (prefers-color-scheme: light) {
  tool-tip {
    --_bg: white;
    --_shadow-alpha: 15%;
  }
}

Beim hellen Design passen wir den Hintergrund an Weiß an und reduzieren die Stärke der Schatten, indem wir ihre Deckkraft anpassen.

Von rechts nach links

Um den Lese-Modus von rechts nach links zu unterstützen, wird in einer benutzerdefinierten Eigenschaft der Wert der Dokumentrichtung in einem Wert von -1 oder 1 gespeichert.

tool-tip {
  --isRTL: -1;
}

tool-tip:dir(rtl) {
  --isRTL: 1;
}

Damit kann die Positionierung des Tooltips unterstützt werden:

tool-tip[tip-position="top"]) {
  --_x: calc(50% * var(--isRTL));
}

Außerdem wird angezeigt, wo sich das Dreieck befindet:

tool-tip[tip-position="right"]::after {
  --_tip: var(--_left-tip);
}

tool-tip[tip-position="right"]:dir(rtl)::after {
  --_tip: var(--_right-tip);
}

Schließlich kann auch für logische Transformationen für translateX() verwendet werden:

--_x: calc(var(--isRTL) * -3px * -1);

Positionierung von Kurzinfos

Positionieren Sie den Tooltip logisch mit den Attributen inset-block oder inset-inline, um sowohl die physischen als auch die logischen Tooltippositionen zu berücksichtigen. Im folgenden Code sehen Sie, wie die vier Positionen sowohl für die Leserichtung von links nach rechts als auch von rechts nach links formatiert werden.

Ausrichtung oben und am Blockanfang

tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position])) {
  inset-inline-start: 50%;
  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
  --_x: calc(50% * var(--isRTL));
}

tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))::after {
  --_tip: var(--_bottom-tip);
  inset-block-end: calc(var(--_triangle-size) * -1);
  border-block-end: var(--_triangle-size) solid transparent;
}

Rechtsbündige und Inline-End-Ausrichtung

tool-tip:is([tip-position="right"], [tip-position="inline-end"]) {
  inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
  inset-block-end: 50%;
  --_y: 50%;
}

tool-tip:is([tip-position="right"], [tip-position="inline-end"])::after {
  --_tip: var(--_left-tip);
  inset-inline-start: calc(var(--_triangle-size) * -1);
  border-inline-start: var(--_triangle-size) solid transparent;
}

tool-tip:is([tip-position="right"], [tip-position="inline-end"]):dir(rtl)::after {
  --_tip: var(--_right-tip);
}

Ausrichtung unten und am Blockende

tool-tip:is([tip-position="bottom"], [tip-position="block-end"]) {
  inset-inline-start: 50%;
  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
  --_x: calc(50% * var(--isRTL));
}

tool-tip:is([tip-position="bottom"], [tip-position="block-end"])::after {
  --_tip: var(--_top-tip);
  inset-block-start: calc(var(--_triangle-size) * -1);
  border-block-start: var(--_triangle-size) solid transparent;
}

Linksbündige und inline-start-Ausrichtung

tool-tip:is([tip-position="left"], [tip-position="inline-start"]) {
  inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
  inset-block-end: 50%;
  --_y: 50%;
}

tool-tip:is([tip-position="left"], [tip-position="inline-start"])::after {
  --_tip: var(--_right-tip);
  inset-inline-end: calc(var(--_triangle-size) * -1);
  border-inline-end: var(--_triangle-size) solid transparent;
}

tool-tip:is([tip-position="left"], [tip-position="inline-start"]):dir(rtl)::after {
  --_tip: var(--_left-tip);
}

Animation

Bisher haben wir nur die Sichtbarkeit des Tooltips umgeschaltet. In diesem Abschnitt animieren wir zuerst die Deckkraft für alle Nutzer, da dies eine allgemein sichere Übergangsanimation mit reduzierter Bewegung ist. Anschließend animieren wir die Transformationsposition, sodass das Tooltip-Element aus dem übergeordneten Element herausgeschoben wird.

Sicherer und sinnvoller Standardübergang

Weisen Sie dem Kurzinfo-Element einen Stil zu, um die Deckkraft und die Transformation zu animieren:

tool-tip {
  opacity: 0;
  transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
  transition: opacity .2s ease, transform .2s ease;
}

:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
  opacity: 1;
  transition-delay: 200ms;
}

Übergang mit Bewegung

Für jede Seite, auf der ein Kurzinfo-Fenster angezeigt werden kann, wird die translateX-Eigenschaft leicht positioniert, wenn der Nutzer mit Bewegung einverstanden ist. Dazu wird ein kleiner Abstand festgelegt, der zurückgelegt werden muss:

@media (prefers-reduced-motion: no-preference) {
  :has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:focus-visible):not(:active) tool-tip {
    --_y: 3px;
  }

  :has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
    --_x: -3px;
  }

  :has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
    --_y: -3px;
  }

  :has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
    --_x: 3px;
  }
}

Hier wird der Status „out“ festgelegt, da der Status „in“ bei translateX(0) liegt.

JavaScript

Meiner Meinung nach ist das JavaScript optional. Das liegt daran, dass keiner dieser Tooltips erforderlich sein sollte, um eine Aufgabe in Ihrer Benutzeroberfläche auszuführen. Wenn die Tooltips also komplett ausfallen, sollte das kein großes Problem sein. Das bedeutet auch, dass wir die Tooltips als progressiv verbessert betrachten können. Irgendwann werden alle Browser :has() unterstützen und dieses Skript kann dann vollständig entfernt werden.

Das Polyfill-Skript führt zwei Aktionen aus, aber nur, wenn der Browser :has() nicht unterstützt. Prüfe zuerst, ob :has() unterstützt wird:

if (!CSS.supports('selector(:has(*))')) {
  // do work
}

Suchen Sie als Nächstes die übergeordneten Elemente der <tool-tip>-Elemente und weisen Sie ihnen einen Klassennamen zu:

if (!CSS.supports('selector(:has(*))')) {
  document.querySelectorAll('tool-tip').forEach(tooltip =>
    tooltip.parentNode.classList.add('has_tool-tip'))
}

Als Nächstes fügen Sie eine Reihe von Stilen ein, die diesen Klassennamen verwenden, um das Verhalten des Selektors :has() zu simulieren:

if (!CSS.supports('selector(:has(*))')) {
  document.querySelectorAll('tool-tip').forEach(tooltip =>
    tooltip.parentNode.classList.add('has_tool-tip'))

  let styles = document.createElement('style')
  styles.textContent = `
    .has_tool-tip {
      position: relative;
    }
    .has_tool-tip:is(:hover, :focus-visible, :active) > tool-tip {
      opacity: 1;
      transition-delay: 200ms;
    }
  `
  document.head.appendChild(styles)
}

Das war's. Jetzt werden in allen Browsern die Kurzinfos angezeigt, wenn :has() nicht unterstützt wird.

Fazit

Jetzt wissen Sie, wie ich es gemacht habe. Wie würden Sie es machen? 🙂 Ich freue mich schon auf die popup-API, die die Verwendung von Toggletips vereinfacht, auf die Top-Ebene, die Z-Index-Konflikte vermeidet, und auf die anchor-API, mit der sich Elemente besser im Fenster positionieren lassen. Bis dahin werde ich Tooltips erstellen.

Wir möchten unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, die das Web bietet.

Erstelle eine Demo, schick mir einen Tweet mit den Links und ich füge sie unten im Bereich „Community-Remixe“ hinzu.

Community-Remixe

Hier gibt es noch nichts zu sehen.

Ressourcen

• Quellcode auf GitHub