> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# OverflowingTextWithTooltip
> Truncate long text and reveal its full value in a tooltip.
export const StoryEmbed = ({storyId, title, height = 120}) => <>
Open in Storybook
;
`OverflowingTextWithTooltip` truncates content within the available width. It checks for overflow on pointer entry and focus, then shows a tooltip only when needed. It manages tooltip visibility internally and exposes no controlled or uncontrolled open-state props. Use [OverflowingTextTooltipModeProvider](/ui/primitives/typography/overflowing-text-tooltip-mode-provider) to change when a subtree checks truncation or to turn the tooltip off.
## Usage
```tsx theme={null}
import {
OverflowingTextWithTooltip,
Text,
} from 'twenty-ui/primitives/typography';
export const RecordTitle = () => (
);
```
Constrain the width of the surrounding layout so truncation can occur. `isFocusable` gives the text a tab stop and opens the tooltip on focus or click. Keep essential information available to users who cannot hover.
## Multiline content
```tsx theme={null}
import {
OverflowingTextWithTooltip,
Text,
} from 'twenty-ui/primitives/typography';
export const RecordDescription = () => (
);
```
`lineClamp` matches Text and limits the displayed lines; use a positive integer. `isTooltipMultiline` preserves whitespace and line breaks inside the tooltip. Without a row limit, text truncates on one line.
## Custom content and timing
```tsx theme={null}
import {
OverflowingTextWithTooltip,
Text,
} from 'twenty-ui/primitives/typography';
export const ImportResult = () => (
24 records imported successfully}
tooltipContent="24 records imported successfully"
tooltipPlace="top"
tooltipDelay={300}
isFocusable
/>
);
```
React content requires a plain-string `tooltipContent`. With string text, that prop can override the tooltip label; otherwise the text itself is used. An empty or missing label does not open a tooltip. String URLs remain plain text. Supply links explicitly in `text` or through `render`. Link content and navigation stay caller-owned.
`alwaysShowTooltip` allows the tooltip even without truncation. `tooltipDelay` controls the hover delay and defaults to 500 milliseconds. `tooltipPlace` defaults to `bottom`.
Native attributes, styles, class names, event handlers, and refs target the displayed Text element, a `div` by default. `render` can replace that element while retaining truncation and tooltip behavior. `OverflowingTextWithTooltipProps` is exported from `twenty-ui/primitives/typography`. Typography inherits from the surrounding layout. Set `truncate={false}` to wrap; choose either `truncate` or `lineClamp`. Focusable rendered elements and a caller-supplied `tabIndex` also reveal the tooltip on focus. Use [Text](/ui/primitives/typography/text) and [Tooltip](/ui/primitives/surfaces/tooltip) directly when you need custom composition. Interactive popup content belongs in [Popover](/ui/primitives/surfaces/popover).
## Explicit links
```tsx theme={null}
import { OverflowingTextWithTooltip } from 'twenty-ui/primitives/typography';
export const DocumentationLink = () => (
}
style={{ maxWidth: 160, display: 'block' }}
/>
);
```
Use a single anchor for the whole label, or supply individual anchors in React content with a plain `tooltipContent`. The component adds no anchors of its own. Keep tooltip content informational.
## Migration
Replace `displayedMaxRows` with `lineClamp`. The removed `size` option controlled height, not font size; use native `style` or `className` for sizing. Move intentional URL recognition into caller-owned content. No automatic linkification remains in this component.
## Props
Allows the tooltip even when the text is not truncated.
Adds an optional tab stop. Native tabIndex and focusable render elements also open the tooltip on focus.
Preserves whitespace and line breaks in the tooltip.
Positive integer limiting visible lines, matching Text. Cannot be combined with `truncate`.
Replaces the default div. Native props, styles, handlers and ref target the displayed text, not the popup.
Caller-owned text or React content. Non-string content requires `tooltipContent`. URLs stay plain text.
Plain text displayed in the tooltip. Defaults to nonempty string `text`.
Hover delay in milliseconds.
Preferred side of the tooltip.
Single-line ellipsis by default. Set false to wrap. Cannot be combined with `lineClamp`.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.