HTML + CSSTooltips
Tooltip con vista previa
Al pasar por un enlace aparece una mini tarjeta con icono, título, última actualización y estado.
Ajustes
16px
1x
Código
<button class="uv-tv">Vista previa<span><i>⌁</i><b>Proyecto Atlas</b><small>Actualizado hace 2 min</small><em>En curso</em></span></button>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
Dónde usarlo
Imagina un gestor de tareas donde los proyectos se mencionan por todas partes: en comentarios o en el historial de actividad. En vez de abrir cada uno, pasas el ratón por el nombre y ves «Proyecto Atlas · actualizado hace 2 min · En curso». Es una hover card, ese tooltip con vista previa que usan GitHub o Notion.
No pases de tres o cuatro datos; si necesita scroll, ya es una página. En listas largas, añade un pequeño retardo antes de abrirla, para que al bajar el ratón por una columna no salte una tarjeta en cada fila.