Zurueck zum Index

Tooltips & Popover

EN DE TR

Einordnung

Tooltips sind fuer kurze, nicht-interaktive Hinweise gedacht. Popover sind die bessere Wahl, wenn Struktur, mehrere Zeilen oder Aktionen noetig sind.

Wann Tooltips passen

Kurze Labels fuer Icons
Einzeilige Erklaerungen fuer Controls
Hinweise fuer Hover und Tastaturfokus

Wann Popover besser sind

Mehrzeilige Beschreibungen
Header, Footer und gruppierte Inhalte
Schnellaktionen ohne Modal

Framework-Vertrag

Tooltip-Klassen

.ak-tooltip-trigger erzeugt den relativen Positionierungskontext.

.ak-tooltip-content ist das schwebende Hint-Element.

.ak-tooltip-right, .ak-tooltip-bottom, .ak-tooltip-left aendern die Richtung.

Ohne Richtungsmodifier ist die Platzierung oben der Standard.

<button type="button" class="ak-tooltip-trigger ak-btn">
  Speichern
  <span class="ak-tooltip-content" role="tooltip">Speichert den Entwurf</span>
</button>

Popover-Klassen

.ak-popover-trigger erzeugt den Positionierungskontext.

.ak-popover-content ist das schwebende Panel.

.ak-popover-header, .ak-popover-body, .ak-popover-footer strukturieren den Inhalt.

.ak-popover-sm, .ak-popover-lg, .ak-popover-interactive erweitern das Verhalten.

<div tabindex="0" role="button"
  class="ak-popover-trigger ak-popover-right ak-btn ak-btn-outline">
  Mehr
  <div class="ak-popover-content">
    <div class="ak-popover-header">Schnellaktionen</div>
    <div class="ak-popover-body">Strukturierte Hinweise oder Aktionen.</div>
  </div>
</div>

Tooltip-Positionen

Alle vier Platzierungen sind im Framework bereits vorhanden. Standardmaessig oeffnet der Tooltip oberhalb des Triggers.

<button type="button" class="ak-tooltip-trigger ak-btn">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-right ak-btn ak-btn-outline">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-bottom ak-btn ak-btn-secondary">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-left ak-btn ak-btn-ghost">...</button>

Tooltip-Muster

Icon-Aktionen

Empfohlen fuer Icon-Buttons, bei denen ein sichtbares Label nur stoeren wuerde.

<button type="button" class="ak-tooltip-trigger ak-btn ak-btn-square" aria-label="Element bearbeiten">
  <i data-lucide="pencil" class="ak-w-4 ak-h-4"></i>
  <span class="ak-tooltip-content" role="tooltip">Element bearbeiten</span>
</button>

Inline-Hilfe

Sinnvoll, wenn ein Feld genau einen kompakten Hinweis braucht, aber kein ganzes Hilfe-Panel.

Diesen Token vertraulich behandeln.

<div class="ak-flex ak-items-center ak-gap-3">
  <input type="text" class="ak-input">
  <button type="button" class="ak-tooltip-trigger ak-btn ak-btn-square ak-btn-ghost">
    <i data-lucide="info" class="ak-w-4 ak-h-4"></i>
    <span class="ak-tooltip-content" role="tooltip">Fuer Server-zu-Server Requests gedacht</span>
  </button>
</div>

Popover

Positionen & Groessen

Popover sind sinnvoll, wenn Inhalt Hierarchie, mehrere Zeilen oder einen sichtbaren Container braucht.

Standard Popover
Oben platziert
Gut fuer strukturierte Hilfetexte, die ueber einen einfachen Tooltip hinausgehen.
Klein Rechts
Kompakter Statushinweis.
Gross Unten
Release-Checkliste
Popover koennen deutlich dichtere Inhalte tragen als Tooltips und bleiben trotzdem leichtgewichtig.
<div tabindex="0" role="button" class="ak-popover-trigger ak-popover-bottom ak-popover-lg ak-btn ak-btn-secondary">
  Gross Unten
  <div class="ak-popover-content">
    <div class="ak-popover-header">Release-Checkliste</div>
    <div class="ak-popover-body">Popover-Inhalte duerfen mehrzeilig sein.</div>
  </div>
</div>

Interaktiver Popover

Nur .ak-popover-interactive verwenden, wenn im schwebenden Panel wirklich klickbare Controls enthalten sind.

Schnellaktionen
Team-Zugriff
Editoren einladen, Review-Link kopieren oder Sichtbarkeit aendern, ohne den Kontext zu verlassen. 
<div tabindex="0" role="button"
  class="ak-popover-trigger ak-popover-interactive ak-popover-right ak-btn ak-btn-outline">
  Schnellaktionen
  <div class="ak-popover-content">
    <div class="ak-popover-header">Team-Zugriff</div>
    <div class="ak-popover-body">Editoren einladen oder Review-Link kopieren.</div>
    <div class="ak-popover-footer">
      <button type="button" class="ak-btn ak-btn-sm ak-btn-ghost">Spaeter</button>
      <button type="button" class="ak-btn ak-btn-sm ak-btn-primary">Einladen</button>
    </div>
  </div>
</div>