Route elevation profile tooltip
Scrub a route's elevation profile with a finger, the mouse or the arrow keys: the tooltip gives altitude, distance and slope.
Settings
Code
<div class="uvq08-elv" style="--p:0.650;--y:0.2981"><div class="hd"><span class="tx"><b>Climb to 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="Elevation profile" 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 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 hiking card with an SVG elevation profile and a small route map in the corner. Move along the profile and a dashed guide, a dot and a tooltip follow you with the altitude, the kilometer and the slope, colored green, amber or red by steepness, while an orange marker walks the route on the map. The profile is an ARIA slider, so the arrow keys move it too.
The main color draws the line, the area and the route, the second tints the map. Replace the elevation list in data-e and the route points in data-r with your own GPX samples, and numbers will format in the page language.