CP Registry

Popover & Tooltip

Native Popover API für leichtgewichtige Overlays. Kein JavaScript nötig. Barrierefreie Tooltips mit CSS-only Hover/Focus.

Moderne Features: popover Attribut, @starting-style, CSS Anchor Positioning mit position-try-fallbacks (Popover flippt automatisch wenn es am Bildschirmrand ansteht).

Popover

Klicke auf die Buttons um Popovers zu öffnen. Sie schließen automatisch bei Klick außerhalb oder Escape.

Das ist ein einfacher Popover mit der nativen Popover API.

Schliesst bei Klick außerhalb oder Escape.

Popover über dem Trigger positioniert.

Popover links vom Trigger.

Popover rechts vom Trigger.

Tooltip

Erscheint bei Hover oder Focus. Rein informativ — kein interaktiver Inhalt erlaubt.

Kopiert den Link Tooltip unten Tooltip links Tooltip rechts

Verwendung

Popover

<!-- Mit Text-Trigger -->
<Popover trigger="Mehr Info" position="bottom">
  <p>Popover-Inhalt hier.</p>
</Popover>

<!-- Mit Custom-Trigger -->
<Popover id="custom-1">
  <button slot="trigger" popovertarget="custom-1">
    Oeffnen
  </button>
  <p>Popover-Inhalt.</p>
</Popover>

Tooltip

<Tooltip text="Hilfetext hier" position="top">
  <button>Hover mich</button>
</Tooltip>

Props

Popover Props

Prop Typ Default Beschreibung
triggerstring—Text für den Standard-Trigger-Button
modestring"auto"auto (schließt bei Klick außerhalb) oder manual
positionstring"bottom"top, bottom, left, right
idstringautoEindeutige ID (automatisch generiert)

Tooltip Props

Prop Typ Default Beschreibung
textstring—Tooltip-Text (Pflicht)
positionstring"top"top, bottom, left, right

Browser-Support & A11y

Popover API

  • Chrome 114+, Firefox 125+, Safari 17+
  • Native Escape zum Schliessen
  • Top-Layer (über allem, kein z-index nötig)
  • :popover-open Pseudo-Klasse
  • Light Dismiss (auto-Modus: Klick außerhalb schließt)

Anchor Positioning

  • Chrome 125+, Edge 125+
  • Safari/Firefox: CSS-Fallback mit absolute Positioning
  • Automatisch via @supports gehandhabt
  • Kein JavaScript für Positionierung nötig