Geteilter Tooltip
Zwei Farbhälften gleiten von links und rechts herein und treffen sich in der Mitte zum Tooltip unter dem Button.
Einstellungen
Code
<button class="uv-ts">Kopieren<span><i></i>In die Zwischenablage 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
Passt gut zu Kopier-Buttons mit etwas Persönlichkeit, etwa beim Rabattcode im Aktionsbanner eines Onlineshops oder beim Gutschein am Ende eines Newsletters. Beide Farben kommen aus deiner Palette, dadurch wirkt der Tooltip nach deiner Marke statt nach dem üblichen schwarzen Label. Dieser CSS-Tooltip öffnet sich unterhalb des Buttons.
Nimm zwei Farben, auf denen der Text gut lesbar bleibt, denn die Meldung liegt direkt darauf. Sind deine Markenfarben sehr hell, dunkle sie etwas ab. Und halte die Nachricht kurz, zwei oder drei Wörter sehen am besten aus.