Zona de acampada2 en esta rutaMirador con vistas3 en esta rutaFuente de agua potable2 en esta rutaRefugio de montaña1 en esta ruta
HTML + CSSTooltips
Map legend highlight tooltip
A hiking map with a legend: hover a symbol to read what it means while every symbol of that kind pulses on the map.
Settings
16px
1x
Code
<div class="uvq08-lgd"><div class="mp" aria-hidden="true"><svg viewBox="0 0 100 100" preserveAspectRatio="none"><path class="rv" d="M0 80C20 72 30 88 50 82S80 64 100 72"/><path class="tr" d="M18 32C26 22 34 16 40 18S44 36 46 44S58 38 63 34S80 24 86 26M46 44C50 50 52 54 56 56S66 66 72 70M46 44C38 54 32 62 27 72"/></svg><i class="sy k0" style="left:18%;top:32%;--k:#2f855a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19L12 5l9 14zM12 5v14M9 19l3-5 3 5"/></svg></i><i class="sy k0" style="left:72%;top:70%;--k:#2f855a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19L12 5l9 14zM12 5v14M9 19l3-5 3 5"/></svg></i><i class="sy k1" style="left:40%;top:18%;--k:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="15" r="3.5"/><circle cx="17" cy="15" r="3.5"/><path d="M10.5 15h3M4.5 12.5L7 6h3l.8 6M19.5 12.5L17 6h-3l-.8 6"/></svg></i><i class="sy k1" style="left:86%;top:26%;--k:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="15" r="3.5"/><circle cx="17" cy="15" r="3.5"/><path d="M10.5 15h3M4.5 12.5L7 6h3l.8 6M19.5 12.5L17 6h-3l-.8 6"/></svg></i><i class="sy k1" style="left:56%;top:56%;--k:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="15" r="3.5"/><circle cx="17" cy="15" r="3.5"/><path d="M10.5 15h3M4.5 12.5L7 6h3l.8 6M19.5 12.5L17 6h-3l-.8 6"/></svg></i><i class="sy k2" style="left:27%;top:72%;--k:#2563eb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.5 6 7.6 6 10.5a6 6 0 0 1-12 0c0-2.9 2.5-6 6-10.5z"/></svg></i><i class="sy k2" style="left:63%;top:34%;--k:#2563eb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.5 6 7.6 6 10.5a6 6 0 0 1-12 0c0-2.9 2.5-6 6-10.5z"/></svg></i><i class="sy k3" style="left:46%;top:44%;--k:#b91c1c"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6.5 8 6.5M6 9.5V20h12V9.5M10 20v-5h4v5"/></svg></i></div><div class="lg" role="group" aria-label="Map legend"><span class="wr lg0 pk"><button type="button" style="--k:#2f855a" aria-describedby="uvq08-lgd-0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19L12 5l9 14zM12 5v14M9 19l3-5 3 5"/></svg><span>Camping</span></button><span class="tt" role="tooltip" id="uvq08-lgd-0"><b>Camping area</b><span>2 on this route</span></span></span><span class="wr lg1"><button type="button" style="--k:#b45309" aria-describedby="uvq08-lgd-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="15" r="3.5"/><circle cx="17" cy="15" r="3.5"/><path d="M10.5 15h3M4.5 12.5L7 6h3l.8 6M19.5 12.5L17 6h-3l-.8 6"/></svg><span>Viewpoint</span></button><span class="tt" role="tooltip" id="uvq08-lgd-1"><b>Scenic viewpoint</b><span>3 on this route</span></span></span><span class="wr lg2"><button type="button" style="--k:#2563eb" aria-describedby="uvq08-lgd-2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.5 6 7.6 6 10.5a6 6 0 0 1-12 0c0-2.9 2.5-6 6-10.5z"/></svg><span>Spring</span></button><span class="tt" role="tooltip" id="uvq08-lgd-2"><b>Drinking water spring</b><span>2 on this route</span></span></span><span class="wr lg3"><button type="button" style="--k:#b91c1c" aria-describedby="uvq08-lgd-3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6.5 8 6.5M6 9.5V20h12V9.5M10 20v-5h4v5"/></svg><span>Refuge</span></button><span class="tt" role="tooltip" id="uvq08-lgd-3"><b>Mountain hut</b><span>1 on this route</span></span></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 paper hiking map with contour lines, a river, forest patches and a dashed trail dotted with campsites, viewpoints, springs and a mountain hut. The legend below is a row of chips: hover or focus one and a tooltip names the feature and counts it, while the matching symbols on the map grow and pulse and the rest fade to grey.
The main color draws the trail and focus ring, the second the paper tone. Each legend entry carries its own color and icon, so adding bike shops, parking or bus stops only takes another item with its map positions.