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.
Tarjeta de usuario al pasar
Pasa por una mención y aparece la ficha de la persona con una bio corta, seguidores y botón de seguir.
Ajustes
Código
<p class="uv-tuh">Gracias a <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">Seguir</span><span class="b">Siguiendo</span></button></span><b class="nm">Lucía Martín</b><span class="hd">@luciamartin</span><span class="bi">Diseño interfaces que se sienten como objetos. Madrid.</span><span class="st"><span><b>1.284</b> seguidores</span><span><b>312</b> siguiendo</span></span></span></span> por el diseño del nuevo panel.</p>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Las redes sociales, los foros y las herramientas colaborativas enseñan quién es alguien sin salir de la página. Al pasar o enfocar la mención, espera un instante y abre una tarjeta con avatar, nombre, usuario, una bio corta y los seguidores. La tarjeta sigue abierta mientras el puntero entra en ella, así que se puede pulsar el botón de seguir, que pasa a siguiendo.
El pequeño retraso evita parpadeos cuando el puntero solo pasa por encima. El botón de seguir lleva aria-pressed y los dos colores forman el degradado del avatar y el color de la mención.