Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProSingle-line text that ends in an ellipsis and shows the full text in a tooltip only when it is really cut off, becoming focusable only then.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for file names, emails and titles in tables, lists and sidebars where space is tight and the full value matters.
Do not use it for text people must read in full to act; wrap it or give it more room. It handles one line only.
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | - | The text. It is also the tooltip text. |
delayDuration | number | 300 | Milliseconds before the tip opens on hover. |
className | string | - | Classes for the text element. |
tabindex="0", a visible focus ring and a Radix tooltip with aria-describedby.| Key | Action |
|---|---|
| Tab | focuses truncated text and shows the full text |
The component ships a Testing Library test (truncate-tip.test.tsx) that covers text that fits (no tab stop, no tooltip) and text that is cut off (focusable, tooltip).