Truncated text tooltip

Long names are cut with an ellipsis, and only those show the full text when hovered or focused.

Settings

Main color#ea580c

Secondary color#ffedd5

Size16px

Speed1x

Text

Code

index.html

<div class="uv-ttx"><p>Recent documents</p><ul><li tabindex="0"><span class="ic" aria-hidden="true">pdf</span><span class="nm">Kitchen renovation quote final final version.pdf</span></li><li tabindex="0"><span class="ic" aria-hidden="true">zip</span><span class="nm">Photos.zip</span></li><li tabindex="0"><span class="ic" aria-hidden="true">docx</span><span class="nm">Rental agreement signed by both parties 2026.docx</span></li><li tabindex="0"><span class="ic" aria-hidden="true">txt</span><span class="nm">Notes.txt</span></li></ul></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.

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

File lists, tables and sidebars truncate long names to keep rows tidy, and people still need a way to read them. This list checks each row and only adds a tooltip to the names that are actually cut off, showing the full text above after a short delay on hover or keyboard focus. Short names stay quiet.

The check re-runs when the list resizes or its text changes, so it adapts to responsive layouts and translations. Truncated rows also get an aria-label with the complete name.