HTML + CSSTooltips

Orion star chart tooltip

A star chart of Orion: each star opens a card with magnitude, distance and type, and its constellation lines light up.

Settings

16px
1x

Code

<div class="uvq08-sky" role="group" aria-label="Orion"><div class="ch"><svg class="ln" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><line class="a0 a1" x1="30" y1="20" x2="68" y2="25"/><line class="a0 a2" x1="30" y1="20" x2="41" y2="55"/><line class="a1 a4" x1="68" y1="25" x2="61" y2="47"/><line class="a2 a3" x1="41" y1="55" x2="51" y2="51"/><line class="a3 a4" x1="51" y1="51" x2="61" y2="47"/><line class="a2 a5" x1="41" y1="55" x2="35" y2="84"/><line class="a4 a6" x1="61" y1="47" x2="72" y2="80"/></svg><i class="bg" style="left:0.0%;top:55.2%;--d:0.14em;--o:0.49"></i><i class="bg" style="left:38.5%;top:91.2%;--d:0.12em;--o:0.46"></i><i class="bg" style="left:34.1%;top:23.7%;--d:0.13em;--o:0.31"></i><i class="bg" style="left:43.6%;top:93.3%;--d:0.14em;--o:0.45"></i><i class="bg" style="left:12.1%;top:20.8%;--d:0.13em;--o:0.70"></i><i class="bg" style="left:27.2%;top:54.3%;--d:0.21em;--o:0.36"></i><i class="bg" style="left:84.7%;top:22.7%;--d:0.15em;--o:0.63"></i><i class="bg" style="left:23.2%;top:93.2%;--d:0.16em;--o:0.59"></i><i class="bg" style="left:8.6%;top:28.2%;--d:0.20em;--o:0.73"></i><i class="bg" style="left:8.1%;top:42.3%;--d:0.19em;--o:0.73"></i><i class="bg" style="left:67.0%;top:52.9%;--d:0.15em;--o:0.47"></i><i class="bg" style="left:59.1%;top:96.3%;--d:0.09em;--o:0.74"></i><i class="bg" style="left:36.3%;top:78.3%;--d:0.18em;--o:0.75"></i><i class="bg" style="left:42.0%;top:42.2%;--d:0.18em;--o:0.55"></i><i class="bg" style="left:13.6%;top:23.7%;--d:0.16em;--o:0.62"></i><i class="bg" style="left:42.6%;top:62.2%;--d:0.21em;--o:0.61"></i><i class="bg" style="left:63.9%;top:33.7%;--d:0.11em;--o:0.52"></i><i class="bg" style="left:59.0%;top:99.1%;--d:0.15em;--o:0.49"></i><i class="bg" style="left:48.1%;top:67.3%;--d:0.12em;--o:0.57"></i><i class="bg" style="left:40.6%;top:35.2%;--d:0.16em;--o:0.70"></i><i class="bg" style="left:35.1%;top:38.5%;--d:0.14em;--o:0.59"></i><i class="bg" style="left:44.3%;top:99.8%;--d:0.20em;--o:0.59"></i><i class="bg" style="left:98.5%;top:99.1%;--d:0.12em;--o:0.44"></i><i class="bg" style="left:47.7%;top:85.8%;--d:0.21em;--o:0.72"></i><i class="bg" style="left:12.6%;top:72.1%;--d:0.12em;--o:0.41"></i><i class="bg" style="left:50.7%;top:63.4%;--d:0.19em;--o:0.71"></i><i class="bg" style="left:15.0%;top:43.5%;--d:0.17em;--o:0.75"></i><i class="bg" style="left:43.0%;top:45.9%;--d:0.19em;--o:0.40"></i><i class="bg" style="left:97.4%;top:5.0%;--d:0.20em;--o:0.67"></i><i class="bg" style="left:31.4%;top:74.4%;--d:0.12em;--o:0.56"></i><i class="bg" style="left:45.7%;top:41.4%;--d:0.09em;--o:0.39"></i><i class="bg" style="left:72.6%;top:16.5%;--d:0.13em;--o:0.54"></i><i class="bg" style="left:88.4%;top:57.4%;--d:0.21em;--o:0.60"></i><i class="bg" style="left:5.9%;top:39.6%;--d:0.14em;--o:0.53"></i><i class="nb" aria-hidden="true"></i><button type="button" class="st s0 dn hl pk" style="left:30%;top:20%;--z:1.05em;--c:#ffab73;--i:0" aria-label="Betelgeuse" aria-describedby="uvq08-sky-0"><span class="tt" role="tooltip" id="uvq08-sky-0"><b>Betelgeuse<i>M1</i></b><span class="r"><em>Magnitude</em>0,5</span><span class="r"><em>Distance</em>548 light years</span></span></button><button type="button" class="st s1 dn hr" style="left:68%;top:25%;--z:0.78em;--c:#d6e4ff;--i:1" aria-label="Bellatrix" aria-describedby="uvq08-sky-1"><span class="tt" role="tooltip" id="uvq08-sky-1"><b>Bellatrix<i>B2</i></b><span class="r"><em>Magnitude</em>1,6</span><span class="r"><em>Distance</em>250 light years</span></span></button><button type="button" class="st s2 up hc" style="left:41%;top:55%;--z:0.74em;--c:#dce8ff;--i:2" aria-label="Alnitak" aria-describedby="uvq08-sky-2"><span class="tt" role="tooltip" id="uvq08-sky-2"><b>Alnitak<i>O9</i></b><span class="r"><em>Magnitude</em>1,8</span><span class="r"><em>Distance</em>1,260 light years</span></span></button><button type="button" class="st s3 up hc" style="left:51%;top:51%;--z:0.8em;--c:#dce8ff;--i:3" aria-label="Alnilam" aria-describedby="uvq08-sky-3"><span class="tt" role="tooltip" id="uvq08-sky-3"><b>Alnilam<i>B0</i></b><span class="r"><em>Magnitude</em>1,7</span><span class="r"><em>Distance</em>1,980 light years</span></span></button><button type="button" class="st s4 up hc" style="left:61%;top:47%;--z:0.68em;--c:#dce8ff;--i:4" aria-label="Mintaka" aria-describedby="uvq08-sky-4"><span class="tt" role="tooltip" id="uvq08-sky-4"><b>Mintaka<i>O9</i></b><span class="r"><em>Magnitude</em>2,2</span><span class="r"><em>Distance</em>1,200 light years</span></span></button><button type="button" class="st s5 up hc" style="left:35%;top:84%;--z:0.74em;--c:#d6e4ff;--i:5" aria-label="Saiph" aria-describedby="uvq08-sky-5"><span class="tt" role="tooltip" id="uvq08-sky-5"><b>Saiph<i>B0</i></b><span class="r"><em>Magnitude</em>2,1</span><span class="r"><em>Distance</em>650 light years</span></span></button><button type="button" class="st s6 up hr" style="left:72%;top:80%;--z:1.05em;--c:#bcd4ff;--i:6" aria-label="Rigel" aria-describedby="uvq08-sky-6"><span class="tt" role="tooltip" id="uvq08-sky-6"><b>Rigel<i>B8</i></b><span class="r"><em>Magnitude</em>0,1</span><span class="r"><em>Distance</em>860 light years</span></span></button><span class="tl" aria-hidden="true"><b>Orion</b><span>Winter sky chart</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.

Markdown version with all the code, for AI assistants

More in Tooltips

See all Tooltips

Where to use it

A winter sky chart of Orion drawn with CSS: a faint grid, scattered background stars, a pink nebula and the seven main stars, each sized by brightness and tinted by its color. Hover or focus a star and a glassy card shows its magnitude, distance in light years and spectral type, while the constellation lines that touch it light up through :has().

The main color sets the highlighted lines and focus ring, the second the night sky. Swap the star list for another constellation, a planet map or seats in a planetarium, keeping positions in percentages so the chart scales.