Gracias a @luciamartinLucía Martín@luciamartinDiseño interfaces que se sienten como objetos. Madrid.1.284 seguidores312 siguiendo por el diseño del nuevo panel.
Carte de profil au survol
Survole une mention et une carte de profil apparaît avec une courte bio, les abonnés et un bouton suivre.
Réglages
Code
<p class="uv-tuh">Merci à <span class="mt" tabindex="0">@luciamartin<span class="cd"><span class="tp"><span class="av" aria-hidden="true">LM</span><button type="button" aria-pressed="false"><span class="a">Suivre</span><span class="b">Abonné</span></button></span><b class="nm">Lucía Martín</b><span class="hd">@luciamartin</span><span class="bi">Je conçois des interfaces qu’on a envie de toucher. Madrid.</span><span class="st"><span><b>1.284</b> abonnés</span><span><b>312</b> abonnements</span></span></span></span> pour le design du nouveau tableau de bord.</p>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
Les réseaux sociaux, forums et outils collaboratifs montrent qui est quelqu'un sans quitter la page. Au survol ou au focus de la mention, la carte attend un instant puis s'ouvre avec avatar, nom, identifiant, courte bio et nombre d'abonnés. Elle reste ouverte quand le pointeur y entre, on peut donc appuyer sur le bouton suivre, qui passe à abonné.
Le petit délai évite les clignotements quand le pointeur ne fait que passer. Le bouton est un interrupteur avec aria-pressed. Les deux couleurs forment le dégradé de l'avatar et la couleur de la mention.