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