Nautical chart buoy tooltip
A nautical chart with soundings and buoys that flash in their real rhythm; each one explains its light and which side to pass.
Settings
Code
<div class="uvq08-sea" role="group" aria-label="Lúa estuary"><div class="cht"><svg viewBox="0 0 100 70" aria-hidden="true"><path class="c10" d="M50 0C46 14 56 26 54 36S50 50 62 58S68 66 70 70"/><path class="c5" d="M62 0C58 12 66 22 66 30S60 44 72 50S78 62 80 70"/><path class="ld" d="M72 0H100V70H86C82 60 88 52 80 46S70 36 74 28S68 12 72 0Z"/><path class="tk" d="M8 68L38 59L54 46L66 38"/><text x="12" y="12">24</text><text x="30" y="48">18</text><text x="46" y="30">12</text><text x="60" y="62">7</text><text x="14" y="58">21</text><text x="40" y="8">15</text><text x="60" y="16">6</text><text x="7" y="40">27</text><text x="28" y="22">19</text><text x="48" y="70">9</text></svg><span class="ca" aria-hidden="true"><b>Lúa estuary</b><span>Soundings in meters</span></span><button type="button" class="by red up hc" style="left:38%;top:64%;--t:6s" aria-label="Port buoy" aria-describedby="uvq08-sea-0"><i class="sh" aria-hidden="true"></i><i class="lt f2" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-0"><b>Port buoy</b><span>Keep it to your left when entering</span><code>Fl(2) R 6s</code></span></button><button type="button" class="by grn up hc" style="left:54%;top:50%;--t:4s" aria-label="Starboard buoy" aria-describedby="uvq08-sea-1"><i class="sh" aria-hidden="true"></i><i class="lt f1" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-1"><b>Starboard buoy</b><span>Keep it to your right when entering</span><code>Fl G 4s</code></span></button><button type="button" class="by car dn hc" style="left:22%;top:34%;--t:1s" aria-label="North cardinal" aria-describedby="uvq08-sea-2"><i class="sh" aria-hidden="true"></i><i class="lt q" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-2"><b>North cardinal</b><span>Pass on its north side</span><code>Q</code></span></button><button type="button" class="by lh dn hr pk" style="left:84%;top:24%;--t:10s" aria-label="Punta Lúa lighthouse" aria-describedby="uvq08-sea-3"><i class="sh" aria-hidden="true"></i><i class="lt f3" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-3"><b>Punta Lúa lighthouse</b><span>Visible from 18 miles</span><code>Fl(3) W 10s</code></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 sea chart drawn in SVG with depth soundings, dashed contour lines, a recommended track and a sandy coast with a lighthouse. The port and starboard buoys, the north cardinal and the light each flash in their own rhythm with CSS keyframes. Hover or focus one and a chart-style label names it, says how to pass it and shows its light code.
The main color sets the focus ring, the second the water. Change the light codes and their timing for a real harbor, or reuse the label style for dive sites, moorings or beach services on a coastal map.