How to Build Ellipses Text With Tooltip

The TypographyEllipsesAndTooltipSample component demonstrates how to handle text overflow in React using ellipses and tooltips. It provides interactive controls to customize its behavior and appearance.

[Demo]

Features

• Text Modes:

  • Without Tooltip & Ellipses: Displays the full text without truncation.
  • With Ellipses: Truncates overflowing text with ellipses.
  • With Tooltip & Ellipses: Displays truncated text with ellipses and shows the full content in a tooltip when hovered.

• Customizable Controls:

  • Border Toggle: Add or remove a border around the text container.
  • Container Width Slider: Adjust the width of the text container dynamically.
  • Text Input: Update the text content in real time.

Usage

Import

import TypographyEllipsesAndTooltipSample from './TypographyEllipsesAndTooltipSample';

Add to Your App

function App() {
  return (
    <div>
      <TypographyEllipsesAndTooltipSample />
    </div>
  );
}

export default App;

Component Breakdown

TypographyEllipsesAndTooltipSample

The main component consists of two sections:

Demo Area

• Displays the text in the selected mode with applied styles.
• Dynamically updates based on user inputs.

Controls

• Provides UI elements to modify the component's behavior and appearance.

TitleOverflowTip

A sub-component used to handle text truncation and tooltip display:

• Dynamically checks if the text overflows.
• Displays a tooltip when the text is truncated.

Styled Components

Uses styled components like T.TitleEllipsis to apply styles such as:

• Truncating text with ellipses.
• Controlling text overflow behavior.

Available Controls

• Mode Selector: Choose between different text rendering modes.
• Border Toggle: Add or remove a border around the text container.
• Width Slider: Adjust the width of the container.
• Text Input: Modify the displayed text.