Visitas esta semana
HTML + CSSTooltips

Tooltip für Balkendiagramm

Ein einziger Tooltip gleitet von Balken zu Balken und zeigt den Tageswert samt Veränderung zum Vortag.

Einstellungen

16px
1x

Code

<figure class="uv-tcb"><figcaption>Besuche diese Woche</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 für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Tooltips

Alle ansehen: Tooltips

Wofür du ihn nutzen kannst

Dashboards zeigen oft einen Tooltip pro Balken, der beim Bewegen flackert. Hier gleitet ein einziger Tooltip federnd zwischen den Balken, hebt den aktiven hervor und zeigt den genauen Wert mit grüner oder roter Veränderung gegenüber dem Vortag. Passt zu Analytics, Umsatz, Fitness und Energieverbrauch.

Die Balken sind Buttons mit beschreibenden Labels, das Diagramm lässt sich also per Tab erkunden und von Screenreadern lesen. Zahlen nutzen die Trennzeichen der Seitensprache.