¿Hacemos la demo el viernes a las 11?
Qui a réagi
Des réactions sous un message : au survol, on voit qui a réagi, et un clic t’ajoute à la liste.
Réglages
Code
<div class="uvq08-rx"><div class="msg"><span class="av" aria-hidden="true">SR</span><div class="bb"><b>Sara</b><p>On fait la démo vendredi à 11 h ?</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">J’aime</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">Toi,</span> <span>Ana, Luis, Marta</span> <span>et 9 autres</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">J’adore</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">Toi,</span> <span>Iker, Nora</span> <span>et 3 autres</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">Ça m’amuse</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">Toi,</span> <span>Paula, Dani, Teo</span></span></span></span></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Un message de discussion avec trois puces de réaction en dessous. Au survol ou au focus, une infobulle liste les personnes qui ont réagi à côté d’une grande version de l’icône, qui arrive avec un rebond. Un clic active ou retire ta propre réaction, met à jour le compteur et t’ajoute à la liste. Les icônes sont en SVG intégré, donc identiques sur tous les systèmes sans police d’emoji.
La couleur principale signale tes réactions actives et l’avatar. Remplace icônes, noms et compteurs par tes propres données, et limite la liste à trois noms plus un total pour que l’infobulle tienne sur une ou deux lignes.