HTML + CSSTooltips
Bar chart tooltip
A single tooltip glides from bar to bar showing the day's value and its change from the day before.
Settings
16px
1x
Code
<figure class="uv-tcb"><figcaption>Visits this week</figcaption><div class="ch"><button type="button" style="--v:42" data-d="L" data-v="1302" data-p="0" aria-label="L: 1302 visitas"><i></i><span>L</span></button><button type="button" style="--v:64" data-d="M" data-v="1984" data-p="52" aria-label="M: 1984 visitas"><i></i><span>M</span></button><button type="button" style="--v:51" data-d="X" data-v="1581" data-p="-20" aria-label="X: 1581 visitas"><i></i><span>X</span></button><button type="button" style="--v:88" data-d="J" data-v="2728" data-p="73" aria-label="J: 2728 visitas"><i></i><span>J</span></button><button type="button" style="--v:73" data-d="V" data-v="2263" data-p="-17" aria-label="V: 2263 visitas"><i></i><span>V</span></button><button type="button" style="--v:97" data-d="S" data-v="3007" data-p="33" aria-label="S: 3007 visitas"><i></i><span>S</span></button><button type="button" style="--v:58" data-d="D" data-v="1798" data-p="-40" aria-label="D: 1798 visitas"><i></i><span>D</span></button><span class="tt" aria-hidden="true"><b>0</b><span class="dl">0 %</span></span></div></figure>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
Dashboards often show a tooltip per bar, which flickers as the pointer moves. Here one tooltip slides smoothly between bars with a springy motion, highlights the active bar and shows the exact value with a green or red change versus the previous day. It works for analytics, sales, fitness and energy use.
Bars are buttons with descriptive labels, so the chart can be explored with the Tab key and read by screen readers. Feed heights and values from your data, and numbers follow the page language for separators.