AIMRAN
HTML + CSSTooltips

Tooltip mit Vorschau

Beim Hovern über einen Link öffnet sich eine kleine Karte mit Icon, Titel, letzter Änderung und Status.

Einstellungen

16px
1x

Code

<button class="uv-tv">Vorschau<span><i>⌁</i><b>Projekt Atlas</b><small>Vor 2 Min. aktualisiert</small><em>In Arbeit</em></span></button>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Tooltips

Alle ansehen: Tooltips

Tooltip mit Federeffekt

TooltipsHTML + CSS

Tooltip mit Farbverlauf

TooltipsHTML + CSS

Tooltip, der dem Cursor folgt

TooltipsHTML + CSS

Verzögerter Tooltip mit Unschärfe

TooltipsHTML + CSS

Tooltip auf Kreisbahn

TooltipsHTML + CSS

Tooltip mit Tastenkürzel

TooltipsHTML + CSS

Geteilter Tooltip

TooltipsHTML + CSS

Tooltip mit Lichtschimmer

TooltipsHTML + CSS

Wofür du ihn nutzen kannst

Denk an ein Aufgaben-Tool, in dem Projekte ständig erwähnt werden: in Kommentaren, im Aktivitätsverlauf, in der Wochenübersicht. Statt jedes einzeln zu öffnen, fährst du über den Namen und siehst „Projekt Atlas · vor 2 Min. aktualisiert · In Arbeit“. Eine Hover-Card, also ein Tooltip mit Vorschau, wie man ihn von GitHub oder Notion kennt.

Mehr als drei oder vier Angaben sollten nicht hinein; braucht die Karte einen Scrollbalken, ist sie eigentlich eine Seite. In langen Listen hilft eine kleine Verzögerung, damit nicht bei jeder Zeile eine Karte aufpoppt, nur weil die Maus vorbeikommt.