OverflowingTextWithTooltip

import {
  OverflowingTextWithTooltip,
  Text,
} from 'twenty-ui/primitives/typography';

export const RecordTitle = () => (
  <Text style={{ maxWidth: 220 }}>
    <OverflowingTextWithTooltip
      text="Quarterly account review and renewal preparation"
      isFocusable
    />
  </Text>
);

import {
  OverflowingTextWithTooltip,
  Text,
} from 'twenty-ui/primitives/typography';

export const RecordDescription = () => (
  <Text style={{ maxWidth: 220 }}>
    <OverflowingTextWithTooltip
      text="Review the account history, confirm the renewal date, and prepare the next conversation with the customer."
      displayedMaxRows={2}
      isTooltipMultiline
      isFocusable
    />
  </Text>
);

import {
  OverflowingTextWithTooltip,
  Text,
} from 'twenty-ui/primitives/typography';

export const ImportResult = () => (
  <Text style={{ maxWidth: 220 }}>
    <OverflowingTextWithTooltip
      text={<strong>24 records imported successfully</strong>}
      tooltipContent="24 records imported successfully"
      tooltipPlace="top"
      tooltipDelay={300}
      isFocusable
    />
  </Text>
);