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 } from 'twenty-ui/primitives/typography';

export const WorkspaceCaption = () => (
  <OverflowingTextWithTooltip
    text="Quarterly account review and renewal preparation"
    size="xs"
    weight="semibold"
    color="light"
    style={{ maxWidth: 220 }}
  />
);

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."
      lineClamp={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>
);

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

export const DocumentationLink = () => (
  <OverflowingTextWithTooltip
    text="https://twenty.com/developers"
    render={
      <a href="https://twenty.com/developers" aria-label="Documentation" />
    }
    style={{ maxWidth: 160, display: 'block' }}
  />
);