HTML + CSSTooltips
Bouncy tooltip
A tooltip that pops up above a button with a springy scale, on hover and on keyboard focus.
Settings
16px
1x
Code
<button class="uv-tp">Hover me<span>Saved 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
A bouncy tooltip adds a bit of personality to small hints: explaining the icon buttons of an editor toolbar, labelling a share button or saying “Saved to favorites” above a bookmark icon. It grows out of the button with a small overshoot and a small arrow. It also appears when people reach the button with the keyboard.
Keep the text short, because it stays on a single line. The tooltip uses your page's text color as its background, so it automatically turns dark on light pages and light on dark ones.