Lunar atlas tooltip
The near side of the Moon with its seas and craters marked: each gets a ring at its real size and opens its card.
Settings
Code
<div class="uvq08-mon" role="group" aria-label="Near side of the Moon"><p class="hd" aria-hidden="true">Near side of the Moon</p><div class="mn"><button type="button" class="ft f0 dn pk" style="left:63%;top:47%;--s:17%" aria-label="Sea of Tranquility" aria-describedby="uvq08-mon-0"><span class="tt" role="tooltip" id="uvq08-mon-0"><b>Sea of Tranquility</b><code>Mare · 873 km</code><span>Apollo 11 landed here in 1969</span></span></button><button type="button" class="ft f1 dn" style="left:58%;top:30%;--s:14%" aria-label="Sea of Serenity" aria-describedby="uvq08-mon-1"><span class="tt" role="tooltip" id="uvq08-mon-1"><b>Sea of Serenity</b><code>Mare · 707 km</code><span>Smooth, dark basalt lava</span></span></button><button type="button" class="ft f2 dn" style="left:36%;top:30%;--s:22%" aria-label="Sea of Showers" aria-describedby="uvq08-mon-2"><span class="tt" role="tooltip" id="uvq08-mon-2"><b>Sea of Showers</b><code>Mare · 1,146 km</code><span>The largest sea on the near side</span></span></button><button type="button" class="ft f3 up" style="left:33%;top:53%;--s:7%" aria-label="Copernicus" aria-describedby="uvq08-mon-3"><span class="tt" role="tooltip" id="uvq08-mon-3"><b>Copernicus</b><code>Crater · 93 km</code><span>Its rays shine at full moon</span></span></button><button type="button" class="ft f4 up" style="left:45%;top:81%;--s:6%" aria-label="Tycho" aria-describedby="uvq08-mon-4"><span class="tt" role="tooltip" id="uvq08-mon-4"><b>Tycho</b><code>Crater · 85 km</code><span>Young: about 108 million years old</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
A Moon drawn entirely with layered CSS gradients: dark maria, bright craters, the faint rays of Tycho and a soft limb shadow on a starry card. Five features are buttons sized to their real extent on the disc. Hover or focus one and a dashed ring snaps around it while an atlas label gives its name, type, diameter and a short fact, like the Apollo 11 landing.
The main color sets the rings and the detail line, the second the night around the Moon. Add more craters by giving each one a position and a size in percent, or adapt the idea to a planet, an asteroid or a museum object.