Split tooltip
Two color halves slide in from each side and meet in the middle, forming the tooltip below the button.
Settings
Code
<button class="uv-ts">Copy<span><i></i>Copied to clipboard</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 good match for copy buttons with a bit of personality, like the discount code in an online shop's promo banner or the coupon at the end of a newsletter. The two colors come from your palette, so the tooltip feels branded instead of the usual black label. This CSS tooltip opens below the button.
Pick two colors the text stays readable on, because the message sits right on top of them. If your brand colors are pale, darken them a notch. And keep the message short: the halves look best closing around two or three words.