TextOverflow
A directive that shows a cursor-following tooltip overlay only when the element's text content is actually clipped (scrollWidth > clientWidth).
Example
Hover over the clipped text to see the full content:
This is a very long text that will be clipped with an ellipsis
Hover me to see the full email subject line that gets truncated in the message list
Short text
Usage
Installation
API
Directive Value
| Type | Description |
|---|
| none | No value needed. Uses the element's own textContent. |
Requirements
| Requirement | Description |
|---|
| overflow: hidden | The element must clip its overflow for scrollWidth > clientWidth to trigger. |
| white-space: nowrap | Text should not wrap, otherwise it won't overflow horizontally. |
| text-overflow: ellipsis | Recommended for visual ellipsis indication. |
Behavior
| Behavior | Description |
|---|
| Smart detection | Only shows tooltip when text is actually clipped. If text fits, nothing happens on hover. |
| Cursor following | Tooltip follows the cursor at offset (10px, 20px). |
| Touch devices | Tooltip is hidden on touch devices (hover: none media query). |
| Reactive | Text content is updated whenever the element content changes. |
ankow