OverflowingTextWithTooltip

Panoramica

OverflowingTextWithTooltip tronca il contenuto entro la larghezza disponibile. Verifica la presenza di overflow al passaggio del puntatore e al focus, quindi mostra un tooltip solo quando necessario. Gestisce internamente la visibilità del tooltip e non espone prop controllate o non controllate per lo stato di apertura. Usa OverflowingTextTooltipModeProvider per modificare quando una sottoalbero verifica il troncamento o per disattivare il tooltip.

Utilizzo

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

Limita la larghezza del layout circostante affinché possa verificarsi il troncamento. isFocusable assegna al testo un punto di tabulazione e apre il tooltip al focus o al clic. Mantieni disponibili le informazioni essenziali per gli utenti che non possono passare il puntatore sopra un elemento.

Scegli la tipografia

size, weight e color corrispondono a Testo. Sono facoltativi ed ereditano indipendentemente quando omessi. La tipografia esplicita si applica al testo visualizzato; il tooltip mantiene il suo aspetto condiviso.

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 }}
  />
);

Contenuto su più righe

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 corrisponde a Text e limita le righe visualizzate; usa un intero positivo. isTooltipMultiline conserva gli spazi vuoti e le interruzioni di riga all’interno del tooltip. Senza un limite di righe, il testo viene troncato su una riga.

Contenuto e tempistica personalizzati

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

Il contenuto React richiede tooltipContent come stringa semplice. Con testo in formato stringa, questa prop può sostituire l’etichetta del tooltip; altrimenti viene usato il testo stesso. Un’etichetta vuota o mancante non apre un tooltip. Gli URL stringa rimangono testo normale. Fornisci i link esplicitamente in text o tramite render. Il contenuto dei link e la navigazione restano sotto il controllo del chiamante. alwaysShowTooltip consente il tooltip anche senza troncamento. tooltipDelay controlla il ritardo al passaggio del puntatore e per impostazione predefinita è di 500 millisecondi. tooltipPlace per impostazione predefinita è bottom. Gli attributi nativi, gli stili, i nomi delle classi, i gestori di eventi e i ref si applicano all’elemento Text visualizzato, un div per impostazione predefinita. render può sostituire quell’elemento mantenendo il comportamento di troncamento e del tooltip. OverflowingTextWithTooltipProps viene esportato da twenty-ui/primitives/typography. La tipografia viene ereditata dal layout circostante, a meno che non venga fornita una prop typography esplicita. Imposta truncate={false} per andare a capo; scegli truncate oppure lineClamp. Anche gli elementi renderizzati selezionabili tramite tastiera e un tabIndex fornito dal chiamante mostrano il tooltip quando ricevono il focus. Usa direttamente Text e Tooltip quando hai bisogno di una composizione personalizzata. Il contenuto interattivo dei popup va inserito in Popover.

Link espliciti

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' }}
  />
);

Usa un’unica ancora per l’intera etichetta oppure fornisci singole ancore nel contenuto React con un semplice tooltipContent. Il componente non aggiunge ancore proprie. Mantieni informativo il contenuto del tooltip.

Migrazione

Sostituisci displayedMaxRows con lineClamp. Le precedenti opzioni size="small" e size="large" controllavano l’altezza, non la dimensione del carattere. large impostava un’altezza di 16px. Il nuovo size seleziona le dimensioni dei caratteri del tema e non accetta alias legacy; usa style o className nativi per i vincoli di altezza. color ora accetta colori semantici; sposta i colori CSS arbitrari in style={{ color: customColor }}. Sposta il riconoscimento intenzionale degli URL nel contenuto sotto il controllo del chiamante. In questo componente non rimane alcuna conversione automatica in link.

Props

Allows the tooltip even when the text is not truncated.

"light" | "primary" | "secondary" | "tertiary"

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

boolean

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.

number

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

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

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

"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxs"

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

obbligatorio

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.

boolean

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

"medium" | "regular" | "semibold"

Theme font weight. Omitted values inherit.

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Utilizzo

Scegli la tipografia

Contenuto su più righe

Contenuto e tempistica personalizzati

Link espliciti

Migrazione

Props

​Panoramica

​Utilizzo

​Scegli la tipografia

​Contenuto su più righe

​Contenuto e tempistica personalizzati

​Link espliciti

​Migrazione

​Props

Panoramica

Utilizzo

Scegli la tipografia

Contenuto su più righe

Contenuto e tempistica personalizzati

Link espliciti

Migrazione

Props