Tooltip dell'app

Un breve messaggio che visualizza informazioni aggiuntive quando un utente interagisce con un elemento.

Utilizzo
Props

import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Customer Insights
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Explore customer behavior and preferences"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};

Props	Tipo	Descrizione
nomeClasse	string	Classe CSS opzionale per uno stile aggiuntivo
anchorSelect	Selettore CSS	Selettore per l’ancora del tooltip (l’elemento che attiva il tooltip)
contenuto	stringa	Il contenuto che si desidera visualizzare all’interno del tooltip
delayHide	numero	Il ritardo in secondi prima di nascondere il tooltip dopo che il cursore lascia l’ancora
compensazione	numero	La compensazione in pixel per posizionare il tooltip
noArrow	booleano	Se `true`, nasconde la freccia sul tooltip
èAperto	booleano	Se `true`, il tooltip è aperto di default
posizione	stringa `PlacesType` di `react-tooltip`	Specifica la posizione del tooltip. I valori includono `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, e `left-end`
positionStrategy	stringa `PositionStrategy` di `react-tooltip`	Strategia di posizionamento per il tooltip. Ha due valori: `absolute` e `fixed`

Gestisce il testo traboccante e visualizza un tooltip quando il testo trabocca.

Utilizzo
Proprietà

import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';

  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};

Welcome

Core Concepts

Testo traboccante con Tooltip

​Testo traboccante con Tooltip

Testo traboccante con Tooltip