AIMRAN

Práctica de pianoÚltimas 12 semanas

HTML + CSSTooltips

Activity heatmap tooltip

A twelve week practice grid: hover or move with the arrow keys and a tooltip shows the minutes and the date.

Settings

16px
1x

Code

<div class="uvq08-hm"><p class="hd"><b>Piano practice</b><span>Last 12 weeks</span></p><div class="gd show" role="group" aria-label="Piano practice"><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="34" aria-label="34 min" tabindex="-1"></button><button type="button" class="v2" data-m="31" aria-label="31 min" tabindex="-1"></button><button type="button" class="v1" data-m="6" aria-label="6 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v4" data-m="69" aria-label="69 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v2" data-m="21" aria-label="21 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="55" aria-label="55 min" tabindex="-1"></button><button type="button" class="v4" data-m="63" aria-label="63 min" tabindex="-1"></button><button type="button" class="v4" data-m="61" aria-label="61 min" tabindex="-1"></button><button type="button" class="v2" data-m="25" aria-label="25 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v1" data-m="8" aria-label="8 min" tabindex="-1"></button><button type="button" class="v3" data-m="46" aria-label="46 min" tabindex="-1"></button><button type="button" class="v1" data-m="19" aria-label="19 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v3" data-m="55" aria-label="55 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v3" data-m="45" aria-label="45 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v1" data-m="7" aria-label="7 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="40" aria-label="40 min" tabindex="-1"></button><button type="button" class="v4" data-m="75" aria-label="75 min" tabindex="-1"></button><button type="button" class="v1" data-m="18" aria-label="18 min" tabindex="-1"></button><button type="button" class="v1" data-m="16" aria-label="16 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v2" data-m="36" aria-label="36 min" tabindex="-1"></button><button type="button" class="v4" data-m="70" aria-label="70 min" tabindex="-1"></button><button type="button" class="v1" data-m="9" aria-label="9 min" tabindex="-1"></button><button type="button" class="v2" data-m="22" aria-label="22 min" tabindex="-1"></button><button type="button" class="v2" data-m="22" aria-label="22 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v3" data-m="50" aria-label="50 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v4" data-m="69" aria-label="69 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="58" aria-label="58 min" tabindex="-1"></button><button type="button" class="v2" data-m="33" aria-label="33 min" tabindex="-1"></button><button type="button" class="v3" data-m="45" aria-label="45 min" tabindex="-1"></button><button type="button" class="v2" data-m="35" aria-label="35 min" tabindex="-1"></button><button type="button" class="v3" data-m="57" aria-label="57 min" tabindex="-1"></button><button type="button" class="v3" data-m="52" aria-label="52 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="54" aria-label="54 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v4" data-m="62" aria-label="62 min" tabindex="-1"></button><button type="button" class="v3" data-m="51" aria-label="51 min" tabindex="-1"></button><button type="button" class="v0" data-m="0" aria-label="0 min" tabindex="-1"></button><button type="button" class="v3" data-m="53" aria-label="53 min" tabindex="-1"></button><button type="button" class="v1" data-m="10" aria-label="10 min" tabindex="-1"></button><button type="button" class="v2" data-m="32" aria-label="32 min" tabindex="-1"></button><button type="button" class="v2" data-m="34" aria-label="34 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v3" data-m="58" aria-label="58 min" tabindex="-1"></button><button type="button" class="v3" data-m="50" aria-label="50 min" tabindex="-1"></button><button type="button" class="v1" data-m="14" aria-label="14 min" tabindex="-1"></button><button type="button" class="v3" data-m="43" aria-label="43 min" tabindex="-1"></button><button type="button" class="v2" data-m="31" aria-label="31 min" tabindex="-1"></button><button type="button" class="v3" data-m="46" aria-label="46 min" tabindex="-1"></button><button type="button" class="v4" data-m="63" aria-label="63 min" tabindex="-1"></button><button type="button" class="v2" data-m="38" aria-label="38 min" tabindex="-1"></button><button type="button" class="v3" data-m="49" aria-label="49 min" tabindex="-1"></button><button type="button" class="v2" data-m="25" aria-label="25 min" tabindex="-1"></button><button type="button" class="v2" data-m="33" aria-label="33 min" tabindex="-1"></button><button type="button" class="v2" data-m="37" aria-label="37 min" tabindex="-1"></button><button type="button" class="v3" data-m="44" aria-label="44 min" tabindex="-1"></button><button type="button" class="v4" data-m="73" aria-label="73 min" tabindex="-1"></button><button type="button" class="v3 on" data-m="48" aria-label="48 min" tabindex="0"></button><span class="tt" aria-hidden="true"><b>48 min</b><span>Sun, Oct 25</span></span></div><p class="lg" aria-hidden="true"><span>Less</span><i class="v0"></i><i class="v1"></i><i class="v2"></i><i class="v3"></i><i class="v4"></i><span>More</span></p></div>

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.

Markdown version with all the code, for AI assistants

More in Tooltips

See all Tooltips

Bouncy tooltip

TooltipsHTML + CSS

Gradient tooltip

TooltipsHTML + CSS

Cursor-following tooltip

TooltipsHTML + CSS

Delayed blur tooltip

TooltipsHTML + CSS

Orbit tooltip

TooltipsHTML + CSS

Keyboard shortcut tooltip

TooltipsHTML + CSS

Preview card tooltip

TooltipsHTML + CSS

Split tooltip

TooltipsHTML + CSS

Where to use it

A grid of twelve weeks by seven days in five shades of amber, like a contribution graph for piano practice. A single tooltip glides to the hovered or focused cell with the minutes and a date formatted in the page language. The grid has one tab stop, the arrow keys move in two dimensions, and Home and End jump along the row.

The main color sets the five levels of the scale. Replace the generated data with your own minutes, steps, commits or sales, and change the start date in the script so the labels line up with real days.