Vai al contenuto principale
Intestazione
Un breve messaggio che visualizza informazioni aggiuntive quando un utente interagisce con un elemento.
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Intuizioni del cliente
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Esplora il comportamento e le preferenze dei clienti"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};

Testo traboccante con Tooltip

Gestisce il testo traboccante e visualizza un tooltip quando il testo trabocca.
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Contatta nuovamente il cliente in merito alla sua recente richiesta di informazioni sul prodotto. Discuti le opzioni di prezzo, rispondi a eventuali dubbi e fornisci ulteriori informazioni sul prodotto. Registra i dettagli della conversazione nel CRM per riferimenti futuri.';

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