OverflowingTextTooltipModeProvider

​

Usage

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

export const RecordCell = () => (
  <OverflowingTextTooltipModeProvider mode="measure-on-hover">
    <Text style={{ maxWidth: 220 }}>
      <OverflowingTextWithTooltip
        text="Quarterly account review and renewal preparation"
        isFocusable
      />
    </Text>
  </OverflowingTextTooltipModeProvider>
);

​

Modes

• measure-on-hover, the default without a provider, checks truncation on pointer entry and focus. A label that fits stays out of the way of a parent tooltip.
• measure-on-open checks truncation when the tooltip tries to open. Use it for labels that mount under the pointer, such as a hover overlay, where no pointer entry happens.
• disabled renders only the text, without any tooltip parts. Use it for many labels that a user cannot hover, such as content covered by an overlay.

​

Props