HTML + CSSTooltips

Texto curvo en esfera de reloj

En la esfera de un reloj inteligente, cada complicación explica su dato con un texto que sigue la curva del bisel.

Ajustes

16px
1x

Código

<div class="uvq08-wch" role="group" aria-label="Esfera del reloj"><div class="fc"><svg viewBox="0 0 200 200" aria-hidden="true"><defs><path id="uvq08-wch-a" d="M25 100A75 75 0 0 1 175 100"/><path id="uvq08-wch-b" d="M16 100A84 84 0 0 0 184 100"/></defs><g class="tk"><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(0 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(6 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(12 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(18 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(24 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(30 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(36 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(42 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(48 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(54 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(60 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(66 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(72 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(78 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(84 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(90 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(96 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(102 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(108 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(114 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(120 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(126 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(132 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(138 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(144 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(150 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(156 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(162 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(168 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(174 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(180 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(186 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(192 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(198 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(204 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(210 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(216 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(222 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(228 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(234 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(240 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(246 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(252 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(258 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(264 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(270 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(276 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(282 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(288 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(294 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(300 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(306 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(312 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(318 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(324 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(330 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(336 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(342 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(348 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(354 100 100)"/></g><circle class="sd" cx="100" cy="5.5" r="2.2"/><text class="ct c0" id="uvq08-wch-t0"><textPath href="#uvq08-wch-a" startOffset="27%" text-anchor="middle">Pulso 72 ppm</textPath></text><text class="ct c1" id="uvq08-wch-t1"><textPath href="#uvq08-wch-a" startOffset="73%" text-anchor="middle">8.432 pasos</textPath></text><text class="ct c2" id="uvq08-wch-t2"><textPath href="#uvq08-wch-b" startOffset="73%" text-anchor="middle">Nubes, máx. 21°</textPath></text><text class="ct c3" id="uvq08-wch-t3"><textPath href="#uvq08-wch-b" startOffset="27%" text-anchor="middle">Batería 64 %</textPath></text><text class="tm" x="100" y="111" text-anchor="middle">10:09</text></svg><button type="button" class="k k0" style="--p:72;--r:var(--c2)" aria-label="Pulso" aria-describedby="uvq08-wch-t0">72</button><button type="button" class="k k1 pk" style="--p:84;--r:var(--c1)" aria-label="Pasos" aria-describedby="uvq08-wch-t1">8,4k</button><button type="button" class="k k2" style="--p:0;--r:var(--c1)" aria-label="El tiempo" aria-describedby="uvq08-wch-t2">18°</button><button type="button" class="k k3" style="--p:64;--r:var(--c2)" aria-label="Batería" aria-describedby="uvq08-wch-t3">64%</button></div></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.

Versión Markdown con todo el código, para asistentes de IA

Más en Tooltips

Ver todos: Tooltips

Dónde usarlo

Una esfera redonda de reloj inteligente con anillo de marcas, un punto de segundos que gira y cuatro complicaciones para pulso, pasos, tiempo y batería. Pasa o enfoca una y su explicación aparece como texto curvo siguiendo el bisel, colocado con un textPath de SVG, mientras las letras se juntan hasta su sitio. Encaja en apps de wearables, paneles de actividad física y fichas de producto de relojes.

El color principal tiñe los textos de pasos y tiempo, y el secundario los de pulso y batería. Deja cada línea por debajo de unos veinte caracteres para que quepa en su cuarto de esfera y cambia el desplazamiento del arco para moverla.