HTML + CSSTooltips
Status tooltip
A green dot pulses softly next to the message, so “Available now” actually looks live.
Settings
16px
1x
Code
<button class="uv-tu"><i></i>Status<span><b></b>Available now</span></button>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
Where to use it
Status is easier to trust when it moves a little. Use it for the “Available for new projects” badge on a freelance portfolio, the support button of a web shop during office hours, or the chat icon of a hotel reception. A status tooltip with a live pulse, made in HTML and CSS with no images.
Only show green when it is true. A pulse that says “available” on a Sunday night does more harm than no badge at all. For busy or offline states, swap the green for amber or grey and think about stopping the pulse.