Tooltip

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

export const ExportHelp = () => (
  <Tooltip content="Download the visible records as a CSV file" side="top">
    <span>
      <Button>Export records</Button>
    </span>
  </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.Root>
    <Tooltip.Trigger render={<span />}>
      <Button>Export records</Button>
    </Tooltip.Trigger>
    <Tooltip.Popup side="right" align="start" arrow>
      <Tooltip.Content
        startIcon={<IconInfoCircle />}
        description="Only the records matching your current filters are included."
      >
        Export visible records
      </Tooltip.Content>
    </Tooltip.Popup>
  </Tooltip.Root>
);

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>
);