@fvc/tooltip

@fvc/tooltip provides a tooltip component built on top of Ant Design's Tooltip. It applies the FE-VIS class prefix and token-based border-radius, and exposes the full Ant Design API alongside a testId prop for test targeting.

Installation

bun add @fvc/tooltip

Peer Dependencies

The package expects these dependencies to be available in the consuming application:

bun add react antd

Import

import { Tooltip } from '@fvc/tooltip';

Quick Start

import { Tooltip } from '@fvc/tooltip';

export function InfoIcon() {
  return (
    <Tooltip title="More information about this field">
      <span>?</span>
    </Tooltip>
  );
}

Common Usage

Basic Tooltip

<Tooltip title="Save changes">
  <Button>Save</Button>
</Tooltip>

Placement

<Tooltip title="Top tooltip" placement="top">
  <span>Hover me</span>
</Tooltip>

<Tooltip title="Bottom tooltip" placement="bottom">
  <span>Hover me</span>
</Tooltip>

Trigger on Click

<Tooltip title="Copied!" trigger="click">
  <Button>Copy</Button>
</Tooltip>

Controlled Visibility

const [open, setOpen] = useState(false);

<Tooltip title="Controlled tooltip" open={open} onOpenChange={setOpen}>
  <span>Target</span>
</Tooltip>;

Rich Content

<Tooltip title={<span>Custom <strong>HTML</strong> content</span>}>
  <span>Hover me</span>
</Tooltip>

Props

Extends all Ant Design TooltipProps.

| Prop | Type | Description | | -------------- | ----------- | ----------------------------------------------------------------------- | | title | ReactNode | Tooltip content. | | placement | string | Position relative to the target element. | | trigger | string | Interaction that shows the tooltip ('hover', 'click', 'focus'). | | open | boolean | Controls visibility (controlled mode). | | onOpenChange | function | Callback when visibility changes. | | arrow | boolean | Shows or hides the arrow pointer. | | testId | string | Maps to data-testid on the tooltip trigger. |

TypeScript

The package ships with type definitions. No @types/ install needed.

import type { TooltipProps } from '@fvc/tooltip/types';

Consumer Example

import { Tooltip } from '@fvc/tooltip';

export function FieldLabel({ label, hint }) {
  return (
    <label>
      {label}
      {hint && (
        <Tooltip title={hint} placement="right">
          <span aria-label="info">ℹ</span>
        </Tooltip>
      )}
    </label>
  );
}

Testing

<Tooltip testId="save-tooltip" title="Save changes">
  <Button>Save</Button>
</Tooltip>

screen.getByTestId('save-tooltip');

CSS Customisation

The component reads the following CSS custom property.

| Token | Used for | | ------------------------------- | -------------------------------- | | --tooltip-inner-border-radius | Border radius of the tooltip box |

To override, set it in your global styles:

:root {
  --tooltip-inner-border-radius: 8px;
}

Development

bun run lint
bun run type-check
bun run test
bun run build