Visitas esta semana
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: Tooltips

Dó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.