Tooltip

import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';
import { Text } from 'twenty-ui/primitives/typography';

export const ExportHelp = () => (
  <Tooltip content="Download the visible records as a CSV file" side="top">
    <Text render={<span />}>
      <Button>Export records</Button>
    </Text>
  </Tooltip>
);

import { useState } from 'react';
import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';

export const ControlledExportHelp = () => {
  const [open, setOpen] = useState(false);

  return (
    <Tooltip
      content="Download the visible records as a CSV file"
      open={open}
      onOpenChange={setOpen}
      delay={300}
    >
      <span>
        <Button>Export records</Button>
      </span>
    </Tooltip>
  );
};

import { IconInfoCircle } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';

export const ExportDetails = () => (
  <Tooltip
    content="Export visible records"
    description="Only records matching your current filters are included."
    startIcon={<IconInfoCircle />}
    arrow
  >
    <Button>Export records</Button>
  </Tooltip>
);

import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';

export const ComposedExportDetails = () => (
  <Tooltip.Provider delay={300} closeDelay={100} timeout={400}>
    <Tooltip.Root>
      <Tooltip.Trigger render={<Button>Export records</Button>} />
      <Tooltip.Portal>
        <Tooltip.Positioner side="inline-end" sideOffset={10} arrowPadding={8}>
          <Tooltip.Popup>
            <Tooltip.Arrow />
            <Tooltip.Viewport>
              <Tooltip.Body description="Only records matching your current filters are included.">
                Export visible records
              </Tooltip.Body>
            </Tooltip.Viewport>
          </Tooltip.Popup>
        </Tooltip.Positioner>
      </Tooltip.Portal>
    </Tooltip.Root>
  </Tooltip.Provider>
);

import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';

export const UnavailableExport = () => (
  <Tooltip content="Select at least one record to export">
    <span tabIndex={0} aria-label="Export records unavailable">
      <Button disabled>Export records</Button>
    </span>
  </Tooltip>
);