HTML + CSSInfo-bulles
Infobulle de graphique en barres
Une seule infobulle glisse de barre en barre avec la valeur du jour et sa variation par rapport à la veille.
Réglages
16px
1x
Code
<figure class="uv-tcb"><figcaption>Visites cette semaine</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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Les tableaux de bord affichent souvent une infobulle par barre, qui clignote quand le pointeur bouge. Ici, une seule infobulle glisse entre les barres avec un mouvement souple, met la barre active en avant et montre la valeur exacte avec la variation en vert ou en rouge par rapport à la veille. Pour l'analytique, les ventes, le sport ou l'énergie.
Les barres sont des boutons étiquetés, le graphique se parcourt donc avec Tab et se lit au lecteur d'écran. Les nombres suivent la langue de la page.