Swinging hang tag tooltip
Hover the mug and a cardboard price tag drops on a string, swinging with pendulum physics.
Settings
Code
<div class="uvq08-tag pk"><div class="sc"><button type="button" class="mg" aria-label="Stoneware mug" aria-describedby="uvq08-tag-t"><i class="hl" aria-hidden="true"></i><i class="st" aria-hidden="true"></i></button><i class="sh" aria-hidden="true"></i><i class="hk" aria-hidden="true"></i><span class="sw"><i class="str" aria-hidden="true"></i><span class="tg" role="tooltip" id="uvq08-tag-t"><span class="nm">Stoneware mug</span><b>24 €</b><span class="ds">Handmade in Talavera</span></span></span></div></div>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 glazed mug sits on a wooden shelf with a brass hook below it. Hover or focus the mug and a kraft cardboard tag with a punched hole and grommet drops on its string, then swings and settles thanks to a tiny damped spring simulation. Moving the pointer sideways nudges it again. It fits craft shops, product grids, menus and gift guides.
The main color glazes the mug and the second sets the wood of the shelf. Change the name, price and maker line, or replace the CSS mug with a product photo while keeping the hook and the swinging tag.