Gleitender Toolbar-Tooltip
Ein Tooltip wandert von Button zu Button und passt seine Breite an jedes Label an.
Einstellungen
Code
<div class="uv-ttg" role="toolbar" aria-label="Bearbeitungsleiste"><button type="button" aria-label="Fett"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg></button><button type="button" aria-label="Kursiv"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 5h8M6 19h8M14 5l-4 14"/></svg></button><button type="button" aria-label="Link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg></button><button type="button" aria-label="Bild einfügen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.8"/><path d="M20.5 16l-5-5-8.5 8.5"/></svg></button><button type="button" aria-label="Kommentieren"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg></button><span class="tt" aria-hidden="true"><span class="in"></span></span></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.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Symbolleisten in Editoren brauchen Beschriftungen, aber getrennte Tooltips an jedem Button wirken sprunghaft. Diese Leiste nutzt einen einzigen Tooltip, der zum überfahrenen oder fokussierten Button gleitet und seine Breite weich an das Label anpasst. Das Entlangfahren fühlt sich wie eine durchgehende Bewegung an, ideal für Texteditoren, Designtools und Player.
Die Labels kommen aus dem aria-label jedes Buttons, also eine Quelle für Barrierefreiheit und Tooltip. Er verschwindet, sobald Zeiger oder Fokus die Leiste verlassen. So bleibt die Leiste aufgeräumt.