> ## 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

> Trunca el texto largo y muestra su valor completo en un tooltip.

## Resumen

`OverflowingTextWithTooltip` trunca el contenido dentro del ancho disponible. Comprueba si hay desbordamiento al entrar con el puntero y al enfocar, y luego muestra un tooltip solo cuando es necesario. Gestiona internamente la visibilidad del tooltip y no expone props de estado abierto controladas ni no controladas. Usa [OverflowingTextTooltipModeProvider](https://docs.twenty.com/es/ui/primitives/typography/overflowing-text-tooltip-mode-provider) para cambiar cuándo un subárbol comprueba el truncamiento o para desactivar la información sobre herramientas.

**Light**

[Ejemplo de OverflowingTextWithTooltip (light)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-overflowingtextwithtooltip--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de OverflowingTextWithTooltip (dark)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-overflowingtextwithtooltip--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-surfaces-overflowingtextwithtooltip--display)

## "Uso"

```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>
);
```

Restringe el ancho del diseño circundante para que pueda producirse el truncamiento. `isFocusable` proporciona al texto un punto de tabulación y abre el tooltip al enfocar o hacer clic. Mantén disponible la información esencial para las personas usuarias que no pueden colocar el puntero sobre un elemento.

## Elige la tipografía

`size`, `weight` y `color` coinciden con [Texto](https://docs.twenty.com/es/ui/primitives/typography/text.md). Son opcionales y se heredan de forma independiente cuando se omiten. La tipografía explícita se aplica al texto mostrado; el tooltip conserva su apariencia compartida.

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

export const WorkspaceCaption = () => (
  <OverflowingTextWithTooltip
    text="Quarterly account review and renewal preparation"
    size="xs"
    weight="semibold"
    color="light"
    style={{ maxWidth: 220 }}
  />
);
```

## Contenido multilínea

```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."
      lineClamp={2}
      isTooltipMultiline
      isFocusable
    />
  </Text>
);
```

`lineClamp` coincide con Text y limita las líneas mostradas; usa un entero positivo. `isTooltipMultiline` conserva los espacios en blanco y los saltos de línea dentro del tooltip. Sin un límite de filas, el texto se trunca en una línea.

## Contenido y temporización personalizados

```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>
);
```

El contenido de React requiere un `tooltipContent` de cadena simple. Con texto de cadena, esa prop puede anular la etiqueta del tooltip; de lo contrario, se usa el propio texto. Una etiqueta vacía o ausente no abre un tooltip. Las URL de cadenas permanecen como texto sin formato. Proporciona enlaces explícitamente en `text` o mediante `render`. El contenido y la navegación de los enlaces siguen siendo responsabilidad del llamador.

`alwaysShowTooltip` permite el tooltip incluso sin truncamiento. `tooltipDelay` controla el retraso al colocar el puntero y el valor predeterminado es de 500 milisegundos. `tooltipPlace` tiene como valor predeterminado `bottom`.

Los atributos nativos, estilos, nombres de clase, controladores de eventos y refs se aplican al elemento Text mostrado, un `div` de forma predeterminada. `render` puede reemplazar ese elemento conservando el comportamiento de truncamiento y de información sobre herramientas. `OverflowingTextWithTooltipProps` se exporta desde `twenty-ui/primitives/typography`. La tipografía se hereda del diseño circundante, a menos que se proporcione una prop de tipografía explícita. Establezca `truncate={false}` para ajustar el texto; elija `truncate` o `lineClamp`. Los elementos representados que pueden recibir el foco y un `tabIndex` proporcionado por el llamador también muestran la información sobre herramientas al recibir el foco. Usa [Text](https://docs.twenty.com/es/ui/primitives/typography/text.md) y [Tooltip](https://docs.twenty.com/es/ui/primitives/surfaces/tooltip.md) directamente cuando necesites una composición personalizada. El contenido emergente interactivo debe colocarse en [Popover](https://docs.twenty.com/es/ui/primitives/surfaces/popover.md).

## Enlaces explícitos

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

export const DocumentationLink = () => (
  <OverflowingTextWithTooltip
    text="https://twenty.com/developers"
    render={
      <a href="https://twenty.com/developers" aria-label="Documentation" />
    }
    style={{ maxWidth: 160, display: 'block' }}
  />
);
```

Use un único enlace para toda la etiqueta o proporcione enlaces individuales en contenido de React con un `tooltipContent` simple. El componente no añade enlaces propios. Mantenga informativo el contenido de la información sobre herramientas.

## Migración

Reemplace `displayedMaxRows` por `lineClamp`. Las opciones anteriores `size="small"` y `size="large"` controlaban la altura, no el tamaño de fuente. `large` establecía una altura de 16 px. El nuevo `size` selecciona tamaños de fuente del tema y no acepta alias heredados; usa `style` o `className` nativos para las restricciones de altura. `color` ahora acepta colores semánticos; mueve los colores CSS arbitrarios a `style={{ color: customColor }}`. Mueva el reconocimiento intencional de URL al contenido controlado por el llamador. No queda ninguna conversión automática de URL en enlaces en este componente.

## "Props"

**alwaysShowTooltip** `boolean`

Allows the tooltip even when the text is not truncated.

**color** `"light" | "primary" | "secondary" | "tertiary"`

Semantic text color. Omitted values inherit; native style supports runtime colors.

**isFocusable** `boolean`

Adds an optional tab stop. Native tabIndex and focusable render elements also open the tooltip on focus.

**isTooltipMultiline** `boolean`

Preserves whitespace and line breaks in the tooltip.

**lineClamp** `number`

Positive integer limiting visible lines, matching Text. Cannot be combined with `truncate`.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the default div. Native props, styles, handlers and ref target the displayed text, not the popup.

**size** `"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxs"`

Font size from the theme scale. Omitted values inherit; this does not set height.

**text** `string | number | bigint | boolean | ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | Iterable\<ReactNode\> | ReactPortal | Promise\<...\> | null | undefined` *required*

Caller-owned text or React content. Non-string content requires `tooltipContent`. URLs stay plain text.

**tooltipContent** `string`

Plain text displayed in the tooltip. Defaults to nonempty string `text`.

**tooltipDelay** `number`

Hover delay in milliseconds.

**tooltipPlace** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"`

Preferred side of the tooltip.

**truncate** `boolean`

Single-line ellipsis by default. Set false to wrap. Cannot be combined with `lineClamp`.

**weight** `"medium" | "regular" | "semibold"`

Theme font weight. Omitted values inherit.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.