Perfil de altitud de la ruta
Recorre el perfil de una ruta con el dedo, el ratón o las flechas: el tooltip da altitud, kilómetro y pendiente.
Ajustes
Código
<div class="uvq08-elv" style="--p:0.650;--y:0.2981"><div class="hd"><span class="tx"><b>Subida a Peñalara</b><span>8 km · +918 m · 3 h 10 min</span></span><svg class="rt" viewBox="0 0 60 60" aria-hidden="true"><polyline points="8,57 10.4,55.8 12.8,54.5 15,53 17.1,51.4 18.9,49.7 20.5,47.9 21.7,46 22.6,44 23.3,42.1 23.7,40.1 23.8,38.2 23.8,36.3 23.6,34.5 23.3,32.7 23.1,31.2 22.9,29.7 22.9,28.4 23.1,27.2 23.5,26.2 24.1,25.3 25.1,24.6 26.4,24 27.9,23.5 29.8,23.1 31.8,22.8 34.1,22.6 36.5,22.4 38.9,22.1 41.3,21.9 43.7,21.6 45.9,21.2 48,20.7 49.8,20.1 51.3,19.3 52.5,18.4 53.4,17.4 54,16.2 54.4,14.9 54.5,13.4 54.5,11.8"/><circle class="a" cx="8" cy="57" r="2.6"/><circle class="b" cx="54.5" cy="11.8" r="2.6"/><circle class="me" cx="34.1" cy="22.6" r="3.2"/></svg></div><div class="pf pk" role="slider" tabindex="0" aria-label="Perfil de altitud" aria-valuemin="0" aria-valuemax="8" aria-valuenow="5.2" aria-valuetext="km 5,2, 2.258 m" data-e="1510,1527,1549,1571,1595,1618,1641,1663,1684,1706,1727,1750,1774,1799,1827,1858,1890,1925,1962,2001,2040,2079,2118,2156,2192,2227,2258,2287,2313,2337,2357,2376,2392,2406,2419,2423,2426,2428,2427,2425,2421" data-r="8,57 10.4,55.8 12.8,54.5 15,53 17.1,51.4 18.9,49.7 20.5,47.9 21.7,46 22.6,44 23.3,42.1 23.7,40.1 23.8,38.2 23.8,36.3 23.6,34.5 23.3,32.7 23.1,31.2 22.9,29.7 22.9,28.4 23.1,27.2 23.5,26.2 24.1,25.3 25.1,24.6 26.4,24 27.9,23.5 29.8,23.1 31.8,22.8 34.1,22.6 36.5,22.4 38.9,22.1 41.3,21.9 43.7,21.6 45.9,21.2 48,20.7 49.8,20.1 51.3,19.3 52.5,18.4 53.4,17.4 54,16.2 54.4,14.9 54.5,13.4 54.5,11.8"><svg viewBox="0 0 200 80" preserveAspectRatio="none" aria-hidden="true"><path class="ar" d="M0 80 L0 76.0 L5 74.8 L10 73.3 L15 71.7 L20 70.1 L25 68.5 L30 66.9 L35 65.3 L40 63.9 L45 62.3 L50 60.9 L55 59.3 L60 57.6 L65 55.9 L70 53.9 L75 51.7 L80 49.5 L85 47.1 L90 44.5 L95 41.8 L100 39.1 L105 36.3 L110 33.6 L115 31.0 L120 28.5 L125 26.0 L130 23.9 L135 21.8 L140 20.0 L145 18.3 L150 16.9 L155 15.6 L160 14.5 L165 13.5 L170 12.6 L175 12.3 L180 12.1 L185 12.0 L190 12.1 L195 12.2 L200 12.5 L200 80Z"/><path class="li" d="M0 76.0 L0 76.0 L5 74.8 L10 73.3 L15 71.7 L20 70.1 L25 68.5 L30 66.9 L35 65.3 L40 63.9 L45 62.3 L50 60.9 L55 59.3 L60 57.6 L65 55.9 L70 53.9 L75 51.7 L80 49.5 L85 47.1 L90 44.5 L95 41.8 L100 39.1 L105 36.3 L110 33.6 L115 31.0 L120 28.5 L125 26.0 L130 23.9 L135 21.8 L140 20.0 L145 18.3 L150 16.9 L155 15.6 L160 14.5 L165 13.5 L170 12.6 L175 12.3 L180 12.1 L185 12.0 L190 12.1 L195 12.2 L200 12.5"/></svg><i class="vl" aria-hidden="true"></i><i class="dt" aria-hidden="true"></i><span class="tt md" aria-hidden="true"><b>2.258 m</b><span class="km">km 5,2</span><span class="sl">+16 %</span></span></div><div class="ax" aria-hidden="true"><span>0</span><span>4 km</span><span>8 km</span></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.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Una tarjeta de senderismo con un perfil de altitud en SVG y un pequeño mapa de la ruta en la esquina. Recorre el perfil y una guía, un punto y un tooltip te siguen con la altitud, el kilómetro y la pendiente, en verde, ámbar o rojo según lo empinado, mientras un marcador avanza por el mapa. El perfil es un slider ARIA, así que también funciona con las flechas.
El color principal dibuja la línea, el área y la ruta, y el secundario tiñe el mapa. Cambia la lista de altitudes de data-e y los puntos de data-r por muestras de tu propio GPX, y las cifras saldrán con el formato del idioma de la página.