Orbit tooltip
A tooltip that swings in on a small arc and settles above the icon, as if someone tossed it there.
Settings
Code
<button class="uv-to">♡<span>Add to favourites</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
Icon-only buttons need a label, and this one gives it some character. Picture the heart on a property listing: hover it and “Save to favorites” swings up into place. It is an animated tooltip in plain HTML and CSS, and it also appears on keyboard focus, so it still works when someone tabs through the page.
Give it room above the button, because the arc starts off to the side and can get clipped inside a tight container. It suits single icons with space around them. In a dense toolbar with ten icons, a calmer tooltip will feel less busy.