Zum Hauptinhalt springen
Kopfzeile
Eine kurze Nachricht, die zusätzliche Informationen anzeigt, wenn ein Benutzer mit einem Element interagiert.
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Kundeneinblicke
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Erkunden Sie das Kundenverhalten und die Präferenzen"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};

Überlaufender Text mit Tooltip

Behandelt überlaufenden Text und zeigt einen Tooltip an, wenn der Text überläuft.
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Fassen Sie beim Kunden aufgrund seiner jüngsten Produktanfrage nach. Besprechen Sie Preisoptionen, gehen Sie auf eventuelle Bedenken ein und stellen Sie zusätzliche Produktinformationen bereit. Protokollieren Sie die Details des Gesprächs im CRM zur späteren Referenz.';

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