¿Hacemos la demo el viernes a las 11?
Wer hat reagiert
Reaktionen unter einer Chatnachricht: Beim Hovern siehst du, wer reagiert hat, ein Klick fügt dich selbst hinzu.
Einstellungen
Code
<div class="uvq08-rx"><div class="msg"><span class="av" aria-hidden="true">SR</span><div class="bb"><b>Sara</b><p>Machen wir die Demo am Freitag um 11?</p></div></div><div class="rs"><span class="wr pk" style="--e:#f59e0b"><button type="button" aria-pressed="false" aria-describedby="uvq08-rx-0"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10v10H4a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1zM9 20h7.6a2 2 0 0 0 2-1.6l1.3-6.5A2 2 0 0 0 18 9.5h-4.6l.8-3.7A1.8 1.8 0 0 0 12.4 4L9 10z"/></svg><span class="sr">Gefällt mir</span><span class="n">12</span></button><span class="tt" role="tooltip" id="uvq08-rx-0"><span class="ei" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 10v10H4a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1zM9 20h7.6a2 2 0 0 0 2-1.6l1.3-6.5A2 2 0 0 0 18 9.5h-4.6l.8-3.7A1.8 1.8 0 0 0 12.4 4L9 10z"/></svg></span><span class="who"><span class="me">Du,</span> <span>Ana, Luis, Marta</span> <span>und 9 weitere</span></span></span></span><span class="wr" style="--e:#e11d48"><button type="button" aria-pressed="false" aria-describedby="uvq08-rx-1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.2-9.3C1.7 8 3.6 4.5 7.2 4.5c2 0 3.6 1.1 4.8 2.8 1.2-1.7 2.8-2.8 4.8-2.8 3.6 0 5.5 3.5 4.4 6.7-1.7 4.7-9.2 9.3-9.2 9.3z"/></svg><span class="sr">Super</span><span class="n">5</span></button><span class="tt" role="tooltip" id="uvq08-rx-1"><span class="ei" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-9.2-9.3C1.7 8 3.6 4.5 7.2 4.5c2 0 3.6 1.1 4.8 2.8 1.2-1.7 2.8-2.8 4.8-2.8 3.6 0 5.5 3.5 4.4 6.7-1.7 4.7-9.2 9.3-9.2 9.3z"/></svg></span><span class="who"><span class="me">Du,</span> <span>Iker, Nora</span> <span>und 3 weitere</span></span></span></span><span class="wr" style="--e:#eab308"><button type="button" aria-pressed="false" aria-describedby="uvq08-rx-2"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9.5"/><path d="M7.5 13.5h9a4.5 4.5 0 0 1-9 0z" fill="#fff"/><path d="M7.5 10l1.5-1.2 1.5 1.2M13.5 10l1.5-1.2 1.5 1.2" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="sr">Lustig</span><span class="n">3</span></button><span class="tt" role="tooltip" id="uvq08-rx-2"><span class="ei" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9.5"/><path d="M7.5 13.5h9a4.5 4.5 0 0 1-9 0z" fill="#fff"/><path d="M7.5 10l1.5-1.2 1.5 1.2M13.5 10l1.5-1.2 1.5 1.2" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="who"><span class="me">Du,</span> <span>Paula, Dani, Teo</span></span></span></span></div></div>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 Chatnachricht mit drei Reaktions-Chips darunter. Beim Hovern oder Fokussieren listet ein Tooltip die Personen auf, die reagiert haben, neben einer großen Version des Symbols, das federnd hereinspringt. Ein Klick schaltet deine eigene Reaktion um, ändert den Zähler und fügt dich der Liste hinzu. Die Symbole sind Inline-SVG und sehen ohne Emoji-Schriften überall gleich aus.
Die Hauptfarbe markiert deine aktiven Reaktionen und den Avatar. Tausche Symbole, Namen und Zahlen gegen eigene Daten und beschränke die Liste auf drei Namen plus Anzahl, damit der Tooltip ein oder zwei Zeilen bleibt.