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

Tooltip

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<Element | null>

The ref for the element which the tooltip positions itself with respect to.

isDisabled

boolean

Whether the tooltip is disabled.

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' .