¿Hacemos la demo el viernes a las 11?
Who reacted tooltip
Reactions under a chat message: hover one to see who reacted, click it to add yourself.
Settings
Code
<div class="uvq08-rx"><div class="msg"><span class="av" aria-hidden="true">SR</span><div class="bb"><b>Sara</b><p>Shall we do the demo on Friday at 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">Like</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">You,</span> <span>Ana, Luis, Marta</span> <span>and 9 more</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">Love it</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">You,</span> <span>Iker, Nora</span> <span>and 3 more</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">Haha</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">You,</span> <span>Paula, Dani, Teo</span></span></span></span></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Tooltips
See all TooltipsWhere to use it
A chat message with three reaction chips below it. Hover or focus a chip and a tooltip lists the people who reacted next to a large version of the icon, which bounces in. Clicking toggles your own reaction, updates the count and adds you to the list. The icons are inline SVG, so they look the same on every system without emoji fonts.
The main color marks your active reactions and the avatar. Swap the icons, names and counts for your own data, and keep the list to three names plus a count so the tooltip stays on one or two lines.