Tooltip für abgeschnittenen Text

Lange Namen werden mit Auslassungspunkten gekürzt, und nur diese zeigen bei Hover den ganzen Text.

Einstellungen

Hauptfarbe#ea580c

Zweitfarbe#ffedd5

Größe16px

Tempo1x

Text

Code

index.html

<div class="uv-ttx"><p>Zuletzt geöffnet</p><ul><li tabindex="0"><span class="ic" aria-hidden="true">pdf</span><span class="nm">Kostenvoranschlag Küchenumbau endgültige Fassung.pdf</span></li><li tabindex="0"><span class="ic" aria-hidden="true">zip</span><span class="nm">Fotos.zip</span></li><li tabindex="0"><span class="ic" aria-hidden="true">docx</span><span class="nm">Mietvertrag von beiden Seiten unterschrieben 2026.docx</span></li><li tabindex="0"><span class="ic" aria-hidden="true">txt</span><span class="nm">Notizen.txt</span></li></ul></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: Tooltips

Tooltip mit Federeffekt

TooltipsHTML + CSS

Tooltip mit Farbverlauf

TooltipsHTML + CSS

Tooltip, der dem Cursor folgt

TooltipsHTML + CSS

Verzögerter Tooltip mit Unschärfe

TooltipsHTML + CSS

Tooltip auf Kreisbahn

TooltipsHTML + CSS

Tooltip mit Tastenkürzel

TooltipsHTML + CSS

Tooltip mit Vorschau

TooltipsHTML + CSS

Geteilter Tooltip

TooltipsHTML + CSS

Wofür du ihn nutzen kannst

Dateilisten, Tabellen und Seitenleisten kürzen lange Namen, damit Zeilen ordentlich bleiben, man muss sie aber trotzdem lesen können. Diese Liste prüft jede Zeile und fügt nur bei tatsächlich abgeschnittenen Namen einen Tooltip hinzu, der nach kurzer Verzögerung bei Hover oder Tastaturfokus den vollen Text zeigt. Kurze Namen bleiben ruhig.

Die Prüfung läuft erneut, wenn sich Größe oder Text ändern, sie passt sich also an responsive Layouts und Übersetzungen an. Gekürzte Zeilen bekommen zusätzlich ein aria-label mit dem vollen Namen.