Cotas de plano técnico
Un plano azul de una lámpara: cada punto traza una línea de referencia hasta su ficha con material y medidas.
Ajustes
Código
<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="Cabezal" aria-describedby="uvq08-bpr-0"></button><span class="co c0" style="left:28.9%;top:12%" role="tooltip" id="uvq08-bpr-0"><b>Cabezal</b><span>Aluminio de 0,8 mm</span><span class="mm">Ø 140 mm</span></span><button type="button" class="hs h1" style="left:44.4%;top:47.7%" aria-label="Articulación" aria-describedby="uvq08-bpr-1"></button><span class="co c1" style="left:5.6%;top:24.5%" role="tooltip" id="uvq08-bpr-1"><b>Articulación</b><span>Muelle de 12 N</span><span class="mm">Giro de 0 a 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>Hierro fundido</span><span class="mm">Ø 160 mm · 1,2 kg</span></span><span class="tb" aria-hidden="true"><b>Lámpara L-2</b><span>ESC 1:5</span></span></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Una lámpara de escritorio dibujada con líneas SVG blancas sobre la cuadrícula de un plano, con cota y cajetín. Pasa o enfoca uno de los puntos discontinuos y una línea de referencia amarilla se traza desde la pieza hasta una ficha con su nombre, material y medida en letra monoespaciada. El efecto usa :has() y stroke-dashoffset, sin JavaScript más allá de la demo inicial.
El color principal es el azul del papel y el secundario el amarillo de lápiz de las líneas. Redibuja el objeto en el SVG y ajusta las líneas y la posición de las fichas en porcentajes para muebles, máquinas o páginas que expliquen las partes de un producto.