Tooltips · GEDISA UI

Verwendung

Ein Tooltip beschreibt oder benennt ein Element. Er erscheint bei Hover und Tastaturfokus und darf keine Informationen enthalten, die zum Bedienen zwingend nötig sind.

Standard-Tooltip

Das ist ein Tooltip

blade

<gedisa:tooltip content="Das ist ein Tooltip">
    <gedisa:button>Überfahren</gedisa:button>
</gedisa:tooltip>

Mit Beschreibung

Mit description erhält der Tooltip einen Nebentext unter dem Titel. Die Breite ist auf 320px begrenzt.

Titel und Beschreibung

Das ist ein Tooltip Tooltips beschreiben oder benennen ein Element. Sie helfen, Bedeutung, Funktion oder Alternativtext zu verstehen.

blade

<gedisa:tooltip content="Das ist ein Tooltip" description="Tooltips beschreiben oder benennen ein Element. Sie helfen, Bedeutung, Funktion oder Alternativtext zu verstehen.">
    <gedisa:button>Überfahren</gedisa:button>
</gedisa:tooltip>

Positionen

position legt die Seite fest, align die Ausrichtung entlang dieser Seite. Der Pfeil zeigt immer auf die Mitte des Elements, auch wenn der Tooltip aus Platzgründen auf die Gegenseite ausweicht.

Oben, unten, links und rechts

Oben

Unten

Links

Rechts

blade

<gedisa:tooltip content="Oben" position="top">
    <gedisa:button>Oben</gedisa:button>
</gedisa:tooltip>
<gedisa:tooltip content="Unten" position="bottom">
    <gedisa:button>Unten</gedisa:button>
</gedisa:tooltip>
<gedisa:tooltip content="Links" position="left">
    <gedisa:button>Links</gedisa:button>
</gedisa:tooltip>
<gedisa:tooltip content="Rechts" position="right">
    <gedisa:button>Rechts</gedisa:button>
</gedisa:tooltip>

Ausrichtung am Anfang und Ende

Das ist ein Tooltip

blade

<gedisa:tooltip content="Das ist ein Tooltip" position="top" align="start">
    <gedisa:button>Start</gedisa:button>
</gedisa:tooltip>
<gedisa:tooltip content="Das ist ein Tooltip" position="top" align="end">
    <gedisa:button>Ende</gedisa:button>
</gedisa:tooltip>

Ohne Pfeil

Mit :arrow="false" wird der Tooltip ohne Pfeil und mit geringerem Abstand dargestellt.

Tooltip ohne Pfeil

Das ist ein Tooltip

blade

<gedisa:tooltip content="Das ist ein Tooltip" :arrow="false">
    <gedisa:button>Überfahren</gedisa:button>
</gedisa:tooltip>

Livewire

Inhalte des Tooltips aktualisieren sich mit dem Livewire-Zustand. Das Beispiel zählt die Klicks auf den Button.

Dynamischer Inhalt

Noch nicht kopiert

blade

<gedisa:tooltip :content="$copies === 0 ? 'Noch nicht kopiert' : $copies . '× kopiert'">
    <gedisa:button wire:click="copy" icon="document-duplicate">Kopieren</gedisa:button>
</gedisa:tooltip>

Referenz

Diese Übersicht umfasst die gezeigten Attribute. Positionierung und Anzeige stammen aus flux:tooltip.

gedisa:tooltip

Eigenschaft	Werte	Default
content	Titel des Tooltips
description	Nebentext unter dem Titel
position	`top`, `bottom`, `left`, `right`	`top`
align	`start`, `center`, `end`	`center`
arrow	Pfeil zum Element anzeigen	`true`
slot	Element, das den Tooltip auslöst