Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2universalStack: react
uxaccessibilitytooltiptruncation
Show full text in a tooltip when list text is truncated
Provide the complete label via tooltip/title when compact list items truncate their text.
PR: startsiden/hegnar-zephr-components#876Created: Jun 17, 2026
Bad example
Old codetsx
| 1 | <span className={styles.truncate}>{news.title}</span> |
| 2 | // long titles are clipped with ellipsis and the full text is unreachable |
Explanation (EN)
Truncated titles leave the user unable to read the full text, with no way to reveal it.
Objašnjenje (HR)
Skraceni naslovi onemogucuju korisniku da procita cijeli tekst, bez nacina da ga otkrije.
Good example
New codetsx
| 1 | <span className={styles.truncate} title={news.title}> |
| 2 | {news.title} |
| 3 | </span> |
| 4 | // or a shared <Tooltip content={news.title}> wrapper used elsewhere in the app |
Explanation (EN)
A title attribute or tooltip reveals the full text on hover, matching how other truncated lists behave.
Objašnjenje (HR)
Atribut title ili tooltip otkriva cijeli tekst na hover, u skladu s ponasanjem ostalih skracenih lista.