A brief message that displays additional information when a user interacts with an element.
Usage
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" /> </> ); };
Overflowing Text with Tooltip
Handles overflowing text and displays a tooltip when the text overflows.
Usage
Props
import { OverflowingTextWithTooltip } from 'twenty-ui'; 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} />; };
Noticed something to change?
As an open-source company, we welcome contributions through Github. Help us keep it up-to-date, accurate, and easy to understand by getting involved and sharing your ideas!
