Přejít na hlavní obsah
Hlavička
Krátká zpráva, která zobrazí další informace, když uživatel interaguje s prvkem.
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Zákaznické přehledy
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Prozkoumejte chování a preference zákazníků"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};

Přetékající text s tooltipem

Řeší přetékající text a zobrazuje tooltip, když text přetéká.
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Kontaktujte klienta ohledně jeho nedávného dotazu na produkt. Proberte cenové možnosti, vyřešte případné obavy a poskytněte další informace o produktu. Zaznamenejte podrobnosti rozhovoru do systému CRM pro budoucí potřebu.';

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