HTML + CSSTooltips
Tooltip de gráfico de barras
Un único tooltip se desliza de barra en barra con el valor del día y su variación respecto al anterior.
Ajustes
16px
1x
Código
<figure class="uv-tcb"><figcaption>Visitas esta semana</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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Los paneles suelen mostrar un tooltip por barra, que parpadea al mover el puntero. Aquí un solo tooltip se desliza entre barras con un movimiento elástico, resalta la barra activa y enseña el valor exacto con la variación en verde o rojo respecto al día anterior. Sirve para analítica, ventas, deporte o consumo de energía.
Las barras son botones con etiquetas descriptivas, así que el gráfico se recorre con el tabulador y lo leen los lectores de pantalla. Las cifras usan los separadores del idioma de la página.