Frontend Tip: Auto-Show Tooltip When Ellipsis Text Is Detected

Preface

In front-end development, APIs often return text content that exceeds the available display space.

A common solution is to set a fixed width and apply the CSS style:

text-overflow: ellipsis;

This neatly hides overflowing text with an ellipsis.

However, product requirements may also demand that users can view the full text on hover — in which case, a Tooltip becomes essential.

> Note: The Tooltip should only appear if the text is actually truncated.

Common CSS Approaches

// Tailwind single-line clamp
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

// Custom single-line CSS
single-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

---

The Solution

We created a custom React Hook that detects when text is truncated due to width limitations.

Once truncation is detected, the hook automatically wraps the text with a Tooltip, allowing users to hover and see the complete content.

---

Implementation

`use-ellipsis.ts`

import { useEffect, useRef, useState } from 'react';

type Options = {
  lines?: number; // Supports multiple lines
};

export function useEllipsis({
  lines = 1,
}: Options = {}) {
  const ref = useRef(null);
  const [isEllipsis, setIsEllipsis] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const check = () => {
      if (lines === 1) {
        setIsEllipsis(el.scrollWidth > el.clientWidth);
      } else {
        setIsEllipsis(el.scrollHeight > el.clientHeight);
      }
    };

    check();
    window.addEventListener('resize', check);
    return () => {
      window.removeEventListener('resize', check);
    };
  }, [lines]);

  return { ref, isEllipsis };
}

---

`ellipsis-tooltip.tsx`

import { Tooltip } from '@arco-design/web-react'; // or antd / your own library
import { useEllipsis } from '@/hooks/use-ellipsis.ts';
import { cn } from '@/lib/utils.ts';

type EllipsisTooltipProps = {
  text: string;
  className?: string;
  onClick?: () => void;
  lines?: number;
};

export const EllipsisTooltip: React.FC = ({
  text,
  className,
  onClick,
  lines = 1,
}) => {
  const { ref, isEllipsis } = useEllipsis({ lines });

  const lineClass =
    lines === 1 ? 'truncate whitespace-nowrap' : `line-clamp-${lines}`;

  const content = (
    
      {text}
    
  );

  return isEllipsis ? {content} : content;
};

---

Usage Example & Effect

export default function TestPage() {
  const mockText = 'Very very very very very long';
  const mockText2 = 'Short';

  return (
    <>
      
      
    
  );
}

Outcome:

• First tooltip — triggered because the text exceeds container width.
• Second tooltip — not triggered because the text fits within the container.

---

Why This Pattern Works

By combining `useEllipsis` with a Tooltip, you:

• Improve UX — show complete text only when needed.
• Avoid unnecessary tooltips for short text.
• Support single or multi-line truncation via CSS utility classes (`truncate` or `line-clamp-n`).

This is especially useful in data-driven UIs with unpredictable text length.

---

Bonus: Multi-Platform Content Publishing

If you frequently build UI components like this and need to publish content across multiple platforms, tools like AiToEarn官网 can help.

AiToEarn is an open-source global AI content monetization platform that:

• Generates AI-powered content.
• Publishes to major channels: Douyin, Kwai, WeChat, Bilibili, Xiaohongshu, Facebook, Instagram, LinkedIn, Threads, YouTube, Pinterest, and X (Twitter).
• Provides analytics and AI model rankings (AI模型排名).

This means developers can:

• Deliver a polished UI using components like `EllipsisTooltip`.
• Maximize content reach through AI-powered cross-platform publishing.

---

✅ With this approach, you ensure better visual presentation and efficient content delivery — all while keeping your UI clean and user-friendly.