Práctica de pianoÚltimas 12 semanas

HTML + CSSTooltips

Aktivitäts-Heatmap mit Tooltip

Ein Raster aus zwölf Übungswochen: Hovern oder Pfeiltasten genügen, und ein Tooltip zeigt Minuten und Datum.

Einstellungen

16px
1x

Code

<div class="uvq08-hm"><p class="hd"><b>Klavierüben</b><span>Letzte 12 Wochen</span></p><div class="gd show" role="group" aria-label="Klavierüben"><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>So., 25. Okt.</span></span></div><p class="lg" aria-hidden="true"><span>Weniger</span><i class="v0"></i><i class="v1"></i><i class="v2"></i><i class="v3"></i><i class="v4"></i><span>Mehr</span></p></div>

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Tooltips

Alle ansehen: Tooltips

Wofür du ihn nutzen kannst

Ein Raster aus zwölf Wochen mal sieben Tagen in fünf Bernsteintönen, wie ein Beitragsdiagramm für das Klavierüben. Ein einziger Tooltip gleitet zur berührten oder fokussierten Zelle und zeigt Minuten und ein Datum im Format der Seitensprache. Das Raster hat nur einen Tab-Stopp, die Pfeiltasten bewegen sich in zwei Richtungen, Pos1 und Ende springen innerhalb der Zeile.

Die Hauptfarbe bestimmt die fünf Stufen der Skala. Ersetze die erzeugten Daten durch eigene Minuten, Schritte, Commits oder Verkäufe und ändere das Startdatum im Skript, damit die Beschriftungen zu echten Tagen passen.