Envío gratis a partir de 40 €Pedidos antes de las 18:00 salen hoy. Devolución gratis en 30 días.
HTML + CSSTooltips
3D unfolding tooltip
The tooltip opens like folded paper: first the header, then the body, in 3D.
Settings
16px
1x
Code
<span class="uv-tuf"><button type="button" aria-describedby="uv-tuf-t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg>Shipping</button><span class="tt" role="tooltip" id="uv-tuf-t"><span class="p1">Free shipping over €40</span><span class="p2">Orders before 6 pm ship today. Free returns within 30 days.</span></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
See all TooltipsWhere to use it
A playful alternative to fading tooltips for shipping info, promotions or feature notes. The bubble is made of two panels hinged together: on hover or focus the header flips up into place, then the body unfolds downward a beat later, both with a shadow that lightens as they open, like a piece of paper being unfolded in front of you.
Closing runs the sequence in reverse. The tooltip is linked to the button with aria-describedby, and the headline is editable with the text control while the body stays in the HTML.