> ## 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 = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`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.

<StoryEmbed storyId="ui-surfaces-overflowingtextwithtooltip--single-line-overflowing" title="OverflowingTextWithTooltip example" />

## Usage

```tsx theme={null}
import {
  OverflowingTextWithTooltip,
  Text,
} from 'twenty-ui/primitives/typography';

export const RecordTitle = () => (
  <Text style={{ maxWidth: 220 }}>
    <OverflowingTextWithTooltip
      text="Quarterly account review and renewal preparation"
      isFocusable
    />
  </Text>
);
```

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 = () => (
  <Text style={{ maxWidth: 220 }}>
    <OverflowingTextWithTooltip
      text="Review the account history, confirm the renewal date, and prepare the next conversation with the customer."
      displayedMaxRows={2}
      isTooltipMultiline
      isFocusable
    />
  </Text>
);
```

`displayedMaxRows` 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 = () => (
  <Text style={{ maxWidth: 220 }}>
    <OverflowingTextWithTooltip
      text={<strong>24 records imported successfully</strong>}
      tooltipContent="24 records imported successfully"
      tooltipPlace="top"
      tooltipDelay={300}
      isFocusable
    />
  </Text>
);
```

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 text also recognizes links.

`alwaysShowTooltip` allows the tooltip even without truncation. `tooltipDelay` controls the hover delay and defaults to 500 milliseconds. `tooltipPlace` defaults to `bottom`.

The component supplies its text and tooltip parts internally; it does not accept children, native attributes, or a ref for its text element. 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).

## Props

<ParamField body="alwaysShowTooltip" type="boolean">
  Allows the tooltip even when the text is not truncated.
</ParamField>

<ParamField body="displayedMaxRows" type="number">
  Maximum displayed rows. Omit for single-line truncation; use a positive integer for multiline text.
</ParamField>

<ParamField body="isFocusable" type="boolean">
  Adds a tab stop and opens the tooltip on focus or click.
</ParamField>

<ParamField body="isTooltipMultiline" type="boolean">
  Preserves whitespace and line breaks in the tooltip.
</ParamField>

<ParamField body="size" type="&#x22;large&#x22; | &#x22;small&#x22;">
  Small inherited text sizing or the large fixed-height treatment.
</ParamField>

<ParamField body="text" type="string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined" required>
  Text or React content to truncate. Non-string React content requires `tooltipContent`.
</ParamField>

<ParamField body="tooltipContent" type="string">
  Plain text displayed in the tooltip. Defaults to `text` when it is a nonempty string.
</ParamField>

<ParamField body="tooltipDelay" type="number">
  Hover delay in milliseconds.
</ParamField>

<ParamField body="tooltipPlace" type="&#x22;bottom&#x22; | &#x22;left&#x22; | &#x22;right&#x22; | &#x22;top&#x22;">
  Preferred side of the tooltip.
</ParamField>