Tooltip für Kopierbestätigung
Ein Klick auf den Button, und eine grüne „Kopiert“-Blase erscheint, während sich der Haken selbst zeichnet.
Einstellungen
Code
<button class="uv-tconfirm">Link kopieren<span><svg viewBox="0 0 24 24"><path d="m5 12 4 4 10-10" pathLength="1"/></svg>Kopiert</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
Kopieren gibt von sich aus keine Rückmeldung, also klicken Leute sicherheitshalber zweimal. Das löst dieser Tooltip. Setz ihn beim Einladungslink eines gemeinsamen Reiseplaners ein, beim Empfehlungscode einer Abo-App oder beim „Link kopieren“ einer Stellenanzeige. Ein Copy-to-Clipboard-Tooltip in HTML und CSS mit einem Haken, der sich selbst zeichnet.
Die Blase zeigt nur die Bestätigung, das eigentliche Kopieren braucht eine Zeile JavaScript mit der Clipboard-API. Zeig sie erst, wenn das Kopieren geklappt hat. Sie bleibt, solange der Button den Fokus hat, und verschwindet beim Klick daneben.