Show tooltips only when content overflows

Introduction

When dealing with dynamic data, content may not fit its container. A common solution is to truncate the text with ellipsis and display the full value in a tooltip on hover. However, tooltips are often displayed even when the text isn’t truncated, which is unnecessary and distracting. Here’s a quick tip on how to display the tooltip only when the text overflows its container.

See the live demo on Code Sandbox.

Explanation

To detect if text is overflowing, we can compare the scrollWidth and the clientWidth of the element:

• scrollWidth is the total width of the content inside the element
• clientWidth is the visible width of the element

If scrollWidth is greater than clientWidth, it means the content is overflowing horizontally.

With this, we can conditionally apply a title attribute (or show a custom tooltip) only when needed.