HTML + CSSTooltips

Verzögerter Tooltip mit Unschärfe

Ein Tooltip, der eine halbe Sekunde wartet, dann aus der Unschärfe auftaucht und beim Verlassen schnell verschwindet.

Einstellungen

16px
1x

Code

<button class="uv-tb">Speichern<span>Kürzel: ⌘ + S</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.

Mehr aus Tooltips

Wofür du ihn nutzen kannst

Die kurze Verzögerung macht diesen Tooltip in vollen Oberflächen angenehm. Er passt zu Tastenkürzel-Hinweisen in einer Web-App („Kürzel: ⌘ + S“ unter einem Speichern-Button), zur Toolbar eines Designtools oder zu den Formatierungs-Buttons eines Texteditors. Fährt die Maus nur vorbei, blitzt nichts auf; bleibt sie kurz stehen, wird das Label aus der Unschärfe scharf.

Er richtet sich an Leute, die das Tool schon kennen und eine Erinnerung wollen. Einsteiger warten womöglich nicht lange genug, also keine wichtigen Anleitungen darin verstecken. Er verschwindet schneller, als er kommt, dadurch fühlt sich die Oberfläche flott an.