Antique map ribbon tooltip
A parchment map of the Iberian Peninsula: each city unfurls a banner ribbon with its Roman name and its name today.
Settings
Code
<div class="uvq08-old"><div class="pg"><svg viewBox="0 0 120 90" aria-hidden="true"><polygon class="sd" points="20,15 32,12 47,15 60,14 70,17 82,21 92,23 100,26 96,31 90,37 84,44 82,51 87,58 82,64 77,71 69,76 59,80 50,82 44,83 38,79 32,74 24,75 18,73 20,63 17,55 18,48 20,41 18,30 16,22"/><polygon class="ld" points="20,15 32,12 47,15 60,14 70,17 82,21 92,23 100,26 96,31 90,37 84,44 82,51 87,58 82,64 77,71 69,76 59,80 50,82 44,83 38,79 32,74 24,75 18,73 20,63 17,55 18,48 20,41 18,30 16,22"/><path class="rv" d="M64 46C56 48 48 54 40 52S28 54 21 50M62 23C70 27 78 33 88 41M70 40C60 44 52 60 44 64S36 70 30 72"/><path class="mt" d="M30 20l3-4 3 4M36 18l3-4 3 4M70 22l2.5-3.5 2.5 3.5M76 24l2.5-3.5 2.5 3.5M58 66l2.5-3.5 2.5 3.5M64 64l2.5-3.5 2.5 3.5M46 36l2-3 2 3"/><path class="sh" d="M6 76h10l-2 3H8zM11 76V67M11 68l4 5h-4M11 69l-3.5 4h3.5"/><path class="wv" d="M4 60q2-1.5 4 0t4 0M100 50q2-1.5 4 0t4 0M18 86q2-1.5 4 0t4 0"/></svg><span class="cr" aria-hidden="true"><b>HISPANIA</b><span>ANNO MDLXX</span></span><button type="button" class="ct l" style="left:17.5%;top:55.6%" aria-label="Olisipo" aria-describedby="uvq08-old-0"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-0"><b>Olisipo</b><span>now Lisbon</span></span></button><button type="button" class="ct c" style="left:27.5%;top:61.1%" aria-label="Emerita Augusta" aria-describedby="uvq08-old-1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-1"><b>Emerita Augusta</b><span>now Mérida</span></span></button><button type="button" class="ct c pk" style="left:46.7%;top:56.7%" aria-label="Toletum" aria-describedby="uvq08-old-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-2"><b>Toletum</b><span>now Toledo</span></span></button><button type="button" class="ct c" style="left:32.5%;top:86.7%" aria-label="Gades" aria-describedby="uvq08-old-3"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-3"><b>Gades</b><span>now Cádiz</span></span></button><button type="button" class="ct r" style="left:76.7%;top:33.3%" aria-label="Barcino" aria-describedby="uvq08-old-4"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-4"><b>Barcino</b><span>now Barcelona</span></span></button></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
An old style map on parchment with an inked coastline, rivers, little mountain marks, a sailing ship and a cartouche with the title. Each city is a small castle button. Hover or focus one and a cream ribbon with forked tails unfurls from its center with the Roman name in italic serif and the modern name below, like the banderoles on Renaissance maps.
The main color sets the ribbon ink and the castles, the second the drawing on the map. Swap the outline and the places for your own region, a fantasy world or a vineyard map, and anchor the ribbons left or right near the edges.