HTML + CSSTooltips
Tooltip de estado
Un punto verde late suave junto al mensaje, para que «Disponible ahora» parezca de verdad en directo.
Ajustes
16px
1x
Código
<button class="uv-tu"><i></i>Estado<span><b></b>Disponible ahora</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
Un estado se cree más cuando se mueve un poco. Úsalo en el aviso «Disponible para nuevos proyectos» de un portfolio freelance, en el botón de soporte de una tienda online en horario de atención o en el icono de chat de la recepción de un hotel. Un tooltip de estado con pulso, hecho en HTML y CSS, sin imágenes.
Pon el verde solo cuando sea verdad: un «disponible» latiendo un domingo por la noche hace más daño que no poner nada. Para ocupado o desconectado, cambia a ámbar o gris y plantéate quitar el pulso.