Tooltip, der sich in 3D entfaltet
Der Tooltip öffnet sich wie gefaltetes Papier: zuerst der Kopf, dann der Inhalt, in 3D.
Einstellungen
Code
<span class="uv-tuf"><button type="button" aria-describedby="uv-tuf-t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg>Versand</button><span class="tt" role="tooltip" id="uv-tuf-t"><span class="p1">Kostenloser Versand ab 40 €</span><span class="p2">Bestellungen vor 18 Uhr gehen heute raus. 30 Tage kostenlose Rückgabe.</span></span></span>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
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Eine verspielte Alternative zu eingeblendeten Tooltips für Versandinfos, Aktionen oder Produkthinweise. Die Blase besteht aus zwei Paneelen mit Scharnier: Bei Hover oder Fokus klappt der Kopf hoch an seinen Platz, einen Moment später entfaltet sich der Inhalt nach unten, beide mit einem Schatten, der beim Öffnen heller wird, wie ein Blatt Papier, das man auffaltet.
Beim Schließen läuft die Abfolge rückwärts. Der Tooltip ist per aria-describedby mit dem Button verbunden, die Überschrift änderst du im Textfeld. Der Inhalt bleibt im HTML.