#OverflowTooltip

Shows the full value only when it is actually truncated, so a reader who can already see the text is not given a tooltip that repeats it. It finds the truncating element itself, so wrap the content rather than pointing it at a node.

Source · Storybook

#Usage

import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from '@wallarm-org/design-system/OverflowTooltip';

#Examples

#Multi line auto detection

The same with line-clamp, where truncation happens at the block rather than the line.

#Nested elements

The truncating element is somewhere inside the children, which is the usual case — it is found rather than declared.

#Custom tooltip content

Overriding the content, for when the full value needs formatting the truncated one does not have.

#Force tooltip

Forcing it on regardless of truncation. Reach for a plain Tooltip instead if the answer is always yes — this prop exists for the case that switches.

#Different sides

Placement around the trigger. In a table, keep it off the side the reader is scanning.

#Dynamic content

Content that changes after mount. The measurement is re-taken rather than cached from first render, so text that grows past its box gains a tooltip without being remounted.

#Props

#OverflowTooltipContent

#OverflowTooltipTrigger

#Explorer