HTML + CSSTooltips
Day and night world map tooltip
A world map with the night shadow worked out for now: each city shows its local time, its offset and whether it is day.
Settings
16px
1x
Code
<div class="uvq08-tz" role="group" aria-label="Time around the world"><div class="wm"><svg viewBox="0 0 360 180" preserveAspectRatio="none" aria-hidden="true"><path class="gr" d="M0 45H360M0 90H360M0 135H360M60 0V180M120 0V180M180 0V180M240 0V180M300 0V180"/><polygon points="20,30 60,20 110,20 130,35 115,60 100,75 85,85 75,75 55,60 35,50 20,40"/><polygon points="100,95 120,95 145,110 135,135 120,160 110,150 105,120"/><polygon points="170,40 200,30 225,35 215,50 195,55 175,55"/><polygon points="165,70 200,65 225,85 230,105 215,130 200,145 190,125 185,100 165,95"/><polygon points="215,30 280,20 340,30 350,50 320,70 300,85 270,95 250,75 230,65 220,50"/><polygon points="290,120 320,115 335,130 320,145 295,140"/><polygon points="120,10 150,8 160,20 140,28 125,22"/><path class="nt" d="M0,0 L0,90.0 L6,67.8 L12,50.9 L18,39.6 L24,32.2 L30,27.1 L36,23.5 L42,20.9 L48,19.0 L54,17.5 L60,16.4 L66,15.6 L72,15.0 L78,14.6 L84,14.4 L90,14.3 L96,14.4 L102,14.6 L108,15.0 L114,15.6 L120,16.4 L126,17.5 L132,19.0 L138,20.9 L144,23.5 L150,27.1 L156,32.2 L162,39.6 L168,50.9 L174,67.8 L180,90.0 L186,112.2 L192,129.1 L198,140.4 L204,147.8 L210,152.9 L216,156.5 L222,159.1 L228,161.0 L234,162.5 L240,163.6 L246,164.4 L252,165.0 L258,165.4 L264,165.6 L270,165.7 L276,165.6 L282,165.4 L288,165.0 L294,164.4 L300,163.6 L306,162.5 L312,161.0 L318,159.1 L324,156.5 L330,152.9 L336,147.8 L342,140.4 L348,129.1 L354,112.2 L360,90.0 L360,0 Z"/></svg><i class="sun" aria-hidden="true" style="left:25.0%;top:58.0%"></i><button type="button" class="ct hc" style="left:22.5%;top:39.2%" data-tz="America/Mexico_City" data-lon="-99.1" data-lat="19.4" aria-label="Mexico City" aria-describedby="uvq08-tz-0"><span class="tt" role="tooltip" id="uvq08-tz-0"><b>Mexico City</b><span class="tm">12:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT-6</span></span></span></button><button type="button" class="ct hc" style="left:29.4%;top:27.4%" data-tz="America/New_York" data-lon="-74" data-lat="40.7" aria-label="New York" aria-describedby="uvq08-tz-1"><span class="tt" role="tooltip" id="uvq08-tz-1"><b>New York</b><span class="tm">14:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT-4</span></span></span></button><button type="button" class="ct hc nite pk" style="left:49.0%;top:27.6%" data-tz="Europe/Madrid" data-lon="-3.7" data-lat="40.4" aria-label="Madrid" aria-describedby="uvq08-tz-2"><span class="tt" role="tooltip" id="uvq08-tz-2"><b>Madrid</b><span class="tm">19:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT+1</span></span></span></button><button type="button" class="ct hr nite" style="left:88.8%;top:30.2%" data-tz="Asia/Tokyo" data-lon="139.7" data-lat="35.7" aria-label="Tokyo" aria-describedby="uvq08-tz-3"><span class="tt" role="tooltip" id="uvq08-tz-3"><b>Tokyo</b><span class="tm">03:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT+9</span></span></span></button><button type="button" class="ct hr nite" style="left:92.0%;top:68.8%" data-tz="Australia/Sydney" data-lon="151.2" data-lat="-33.9" aria-label="Sydney" aria-describedby="uvq08-tz-4"><span class="tt" role="tooltip" id="uvq08-tz-4"><b>Sydney</b><span class="tm">05:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT+11</span></span></span></button></div><p class="hd" aria-hidden="true">Time around the world</p></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 low poly world map whose night side is calculated in the browser from the date and time, using the solar declination and the subsolar longitude, with a small sun marking where it is overhead. Hover or focus a city and a tooltip gives its local time and UTC offset through Intl in the page language, with a sun or moon icon depending on the sky there.
The main color sets the city dots, the second the ocean. Add cities with their coordinates and IANA time zone, and the shadow refreshes every thirty seconds. It suits remote teams, travel planners and event pages across time zones.