Sara

¿Hacemos la demo el viernes a las 11?

Tú, Ana, Luis, Marta y 9 másTú, Iker, Nora y 3 másTú, Paula, Dani, Teo
HTML + CSSTooltips

Wer hat reagiert

Reaktionen unter einer Chatnachricht: Beim Hovern siehst du, wer reagiert hat, ein Klick fügt dich selbst hinzu.

Einstellungen

16px
1x

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Tooltips

Alle ansehen: Tooltips

Wofü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.