InfoNew feature available
HTML + CSSTooltips
Gradient tooltip
A colorful gradient tooltip with a matching arrow that slides up from a small badge on hover.
Settings
16px
1x
Code
<span class="uv-tg">Info<span>New feature available</span></span>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
This gradient tooltip is good at announcing things. Put it on a “New” or “Info” badge next to a menu item, on the beta label of a dashboard feature or next to a pricing term that needs a quick explanation. It rises a few pixels as it fades in, its arrow blending into the gradient.
It only reacts to hover, so keyboard and touch users may miss it; don't put anything critical there. Colors that are close together give a soft bubble, while contrasting ones make the tooltip look more like a promotion.