Tooltip API

Import

import { Tooltip } from '@cimpress-ui/react';

Accessibility notes

The element described by the tooltip is automatically associated with the tooltip using the aria-describedby prop. Note that tooltip content won’t usually be announced by screen readers.

The element described by the tooltip must be hoverable and focusable.

Tooltips cannot receive focus nor contain interactive elements.

Tooltips are never shown to users who interact with the UI via touch.

API reference

Provides additional information about an element that is hovered or focused.

See tooltip usage guidelines.

ref Ref<HTMLDivElement>: The ref type for this component.

TooltipProps

children * ReactNode: The element that this tooltip describes. Must be focusable and hoverable.
label * string: The contents of the tooltip.
triggerRef RefObject<null | Element>: The ref for the element which the tooltip positions itself with respect to.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.
isOpen boolean: Whether the element is rendered.
onOpenChange (isOpen: boolean) => void: Handler that is called when the overlay's open state changes.
placement Placement: The placement of the tooltip with respect to the trigger.

Defaults to 'top' .