Tooltip

Der Tooltip-Text steckt in einem data-Attribut und wird von einem Pseudoelement gezeichnet — kein Skript, nichts, das zur Laufzeit positioniert werden müsste, und nichts, das im DOM zurückbleibt. Er erscheint beim Überfahren und beim Tastaturfokus, worum sich die :focus-within-Hälfte der Regel kümmert.

Einfacher Tooltip

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'In die Zwischenablage kopieren' },
    iconButton({
      label: 'Kopieren',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Website neu bauen' },
    button({ variant: 'outline', color: 'neutral' }, 'Neu bauen'),
  ),
)

Platzierung

Standardmäßig oberhalb, unterhalb, wenn oben kein Platz ist.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Über dem Auslöser' },
    button({ variant: 'soft', color: 'neutral' }, 'Oben'),
  ),
  tooltip({ content: 'Unter dem Auslöser', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Unten'),
  ),
)

Zugängliche Namen

Der Tooltip-Text ist Dekoration — er wird aus CSS-content gezeichnet, was Screenreader nicht verlässlich ansagen. Das Steuerelement darin braucht weiterhin seinen eigenen zugänglichen Namen, und genau den liefert das label von iconButton(). Sagt der Tooltip etwas, das der Name des Steuerelements nicht sagt, übergib label: true, um es in einem visuell versteckten span zu wiederholen.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Deployt sofort in die Produktion', label: true },
    button({ color: 'danger' }, 'Deployen'),
  ),
)

Auf Text

Ein Tooltip umschließt Inline-Inhalt genauso bereitwillig wie einen Button.

text(
  'Der Build schreibt nach ',
  tooltip({ content: 'Mit outDir konfigurierbar' }, code('dist/')),
  ' und sonst nirgendwohin.',
)

Wann keiner

Tooltips erscheinen beim Tippen auf Touch gar nicht und verschwinden, sobald der Zeiger weggeht. Alles, was eine Leserin unbedingt braucht — eine Fehlermeldung, die Erklärung eines Pflichtfelds — gehört in den help-Text am Feld selbst, nicht in einen Tooltip.

Props