HTML + CSSTooltips

Mapa del mundo con día y noche

Un mapamundi con la sombra de la noche calculada para ahora: cada ciudad da su hora local, su huso y si es de día.

Ajustes

16px
1x

Código

<div class="uvq08-tz" role="group" aria-label="Hora en el mundo"><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="Ciudad de México" aria-describedby="uvq08-tz-0"><span class="tt" role="tooltip" id="uvq08-tz-0"><b>Ciudad de México</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="Nueva York" aria-describedby="uvq08-tz-1"><span class="tt" role="tooltip" id="uvq08-tz-1"><b>Nueva 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="Tokio" aria-describedby="uvq08-tz-3"><span class="tt" role="tooltip" id="uvq08-tz-3"><b>Tokio</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="Sídney" aria-describedby="uvq08-tz-4"><span class="tt" role="tooltip" id="uvq08-tz-4"><b>Sídney</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">Hora en el mundo</p></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.

Versión Markdown con todo el código, para asistentes de IA

Más en Tooltips

Ver todos: Tooltips

Dónde usarlo

Un mapamundi simple cuya cara nocturna se calcula en el navegador a partir de la fecha y la hora, con la declinación solar y el punto subsolar, y un sol donde está en lo alto. Pasa o enfoca una ciudad y un tooltip da su hora local y su diferencia con UTC mediante Intl en el idioma de la página, con un sol o una luna según su cielo.

El color principal define los puntos de las ciudades y el secundario el océano. Añade ciudades con sus coordenadas y su zona horaria IANA, y la sombra se actualiza cada treinta segundos. Encaja en equipos remotos, planificadores de viaje y eventos con varios husos.