Tooltip

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

Tooltip API

A tooltip provides light weight contextual information on top of its target element.

interface TooltipProps {
  /**
   * The tooltip's visual appearance.
   * * `normal` - Uses the theme's background and text colors.
   * * `inverted` - Higher contrast variant that uses the theme's inverted colors.
   * @default normal
   */
  appearance?: "inverted" | "normal";

  children?: ReactElement<any, string | JSXElementConstructor<any>> | ((props: TooltipTriggerProps) => ReactElement<any, string | JSXElementConstructor<any>> | null) | null;

  /**
   * The text or JSX content of the tooltip.
   */
  content: NonNullable<WithSlotShorthandValue<{ as?: "div" | undefined; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined; }, "children"> & { children?: any; }> | null>;

  /**
   * Delay before the tooltip is hidden, in milliseconds.
   * @default 250
   */
  hideDelay?: number;

  /**
   * Where the portal children are mounted on DOM
   * @default a new element on document.body without any styling
   */
  mountNode?: HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined;

  /**
   * Notification when the visibility of the tooltip is changing.
   *
   * **Note**: for backwards compatibility, `event` will be undefined if this was triggered by a keyboard event on
   * the document element. Use `data.documentKeyboardEvent` if the keyboard event object is needed.
   */
  onVisibleChange?: ((event: PointerEvent<HTMLElement> | FocusEvent<HTMLElement, Element>, data: OnVisibleChangeData) => void);

  /**
   * Configure the positioning of the tooltip
   * @default above
   */
  positioning?: PositioningShorthand;

  /**
   * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
   *
   * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
   *    displaying only an icon, for example.
   * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
   * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
   *   screen readers, and should only be used if the tooltip's text is available by some other means.
   */
  relationship: "label" | "description" | "inaccessible";

  /**
   * Delay before the tooltip is shown, in milliseconds.
   * @default 250
   */
  showDelay?: number;

  /**
   * Control the tooltip's visibility programatically.
   *
   * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
   *
   * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
   * trigger (child) element.
   * @default false
   */
  visible?: boolean;

  /**
   * Render an arrow pointing to the target element
   * @default false
   */
  withArrow?: boolean;
}