Auto Tooltip Text

A component that automatically shows a tooltip when text is truncated based on the maximum number of lines.

Single line (truncated)

This is a very long text that will be truncated to a single line and show a tooltip when you hover over it.

Two lines (default, truncated)

This is a very long text that will be truncated to two lines and show a tooltip when you hover over it. The tooltip will display the full text content.

Three lines (not truncated)

This is a shorter text that fits within three lines, so no tooltip will appear.

Installation

1. Follow the links to install required rlx packages

PackageTypeLink
@rlx-widgets/tooltipWidget

2. Install the following dependencies

Loading...

bash

API Reference

Props list

PropTypeDefaultExampleDescription
textstring-This is a long text that will be truncatedThe text content to display. If it exceeds the maximum number of lines, a tooltip will automatically appear on hover.
maxLinesnumber23Maximum number of lines to display before truncating. Supports values from 1 to 6. Values outside this range will fallback to 2.
classNamestring-custom-classAdditional CSS classes to apply to the text element.

Behavior

The component automatically detects when text is truncated and shows a tooltip on hover:

  • The component measures the element's scrollHeight and clientHeight to detect truncation.
  • If the text is not truncated, it renders as a plain <p> element without a tooltip.
  • If the text is truncated, it wraps the text in a Tooltip component that shows the full text on hover.
  • The component automatically rechecks truncation when the window is resized or when the text or maxLines props change.