Blueprint callout tooltip
A blue technical drawing of a lamp: each hotspot draws a leader line to a card with material and measurements.
Settings
Code
<div class="uvq08-bpr"><svg class="dw" viewBox="0 0 180 130" aria-hidden="true"><rect x="30" y="110" width="52" height="8" rx="2"/><path d="M56 110L80 62"/><path class="sp" d="M62 106l5-3-1-5 5-3-1-5 5-3-1-5 5-3-1-5 5-3"/><circle cx="80" cy="62" r="4.5"/><path d="M80 62L124 36"/><circle cx="124" cy="36" r="3"/><path d="M121 31l14-9 22 25-12 10z"/><path class="lt" d="M147 58l6 9M139 61l2 10M153 53l9 4"/><path class="dm" d="M30 124h52M30 121v6M82 121v6"/><text x="56" y="129.5" text-anchor="middle">160</text><path class="ld l0" pathLength="1" d="M140 38L118 14H52"/><path class="ld l1" pathLength="1" d="M80 62L60 30H10"/><path class="ld l2" pathLength="1" d="M56 114L96 97H170"/></svg><button type="button" class="hs h0 pk" style="left:77.8%;top:29.2%" aria-label="Head" aria-describedby="uvq08-bpr-0"></button><span class="co c0" style="left:28.9%;top:12%" role="tooltip" id="uvq08-bpr-0"><b>Head</b><span>0.8 mm aluminum</span><span class="mm">Ø 140 mm</span></span><button type="button" class="hs h1" style="left:44.4%;top:47.7%" aria-label="Joint" aria-describedby="uvq08-bpr-1"></button><span class="co c1" style="left:5.6%;top:24.5%" role="tooltip" id="uvq08-bpr-1"><b>Joint</b><span>12 N spring</span><span class="mm">Turns 0 to 90°</span></span><button type="button" class="hs h2" style="left:31.1%;top:87.7%" aria-label="Base" aria-describedby="uvq08-bpr-2"></button><span class="co c2" style="left:54.4%;bottom:26%" role="tooltip" id="uvq08-bpr-2"><b>Base</b><span>Cast iron</span><span class="mm">Ø 160 mm · 1.2 kg</span></span><span class="tb" aria-hidden="true"><b>Lamp L-2</b><span>SCALE 1:5</span></span></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 desk lamp drawn as white SVG lines on a blueprint grid, with a dimension line and a title block. Hover or focus one of the dashed hotspots and a yellow leader line draws itself from the part to a callout with its name, material and measurement in a monospaced font. The reveal uses :has() and stroke-dashoffset, with no JavaScript beyond the opening demo.
The main color is the paper blue and the second the pencil yellow of the leaders. Redraw the object in the SVG, then adjust the leader paths and the callout positions in percentages for furniture, machines or product anatomy pages.