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.
User hover card
Hover a mention and a profile card appears with a short bio, follower counts and a follow button.
Settings
Code
<p class="uv-tuh">Thanks to <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">Follow</span><span class="b">Following</span></button></span><b class="nm">Lucía Martín</b><span class="hd">@luciamartin</span><span class="bi">I design interfaces that feel like objects. Madrid.</span><span class="st"><span><b>1.284</b> followers</span><span><b>312</b> following</span></span></span></span> for designing the new dashboard.</p>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
Social apps, forums and collaborative tools show who someone is without leaving the page. Hovering or focusing the mention waits a moment, then opens a card with an avatar, name, handle, short bio and follower counts. The card stays open while the pointer moves into it, so the follow button inside can be pressed, and it switches to following.
The small delay avoids flashes when the pointer only passes by. The follow button is a toggle with aria-pressed, and the two colors build the avatar gradient and the mention color.