@carbon/react
Version:
React components for the Carbon Design System
73 lines (72 loc) • 2.74 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { type JSX } from 'react';
import { Popover, PopoverAlignment } from '../Popover';
import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
interface TooltipBaseProps {
/**
* Specify how the trigger should align with the tooltip
*/
align?: PopoverAlignment;
/**
* Pass in the child to which the tooltip will be applied
*/
children?: React.ReactElement<JSX.IntrinsicElements[keyof JSX.IntrinsicElements]>;
/**
* Specify an optional className to be applied to the container node
*/
className?: string;
/**
* Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
*/
closeOnActivation?: boolean;
/**
* Specify whether the tooltip should be open when it first renders
*/
defaultOpen?: boolean;
/**
* Provide the description to be rendered inside of the Tooltip. The
* description will use `aria-describedby` and will describe the child node
* in addition to the text rendered inside of the child. This means that if you
* have text in the child node, that it will be announced alongside the
* description to the screen reader.
*
* Note: if label and description are both provided, label will be used and
* description will not be used
*/
description?: React.ReactNode;
/**
* Specify whether a drop shadow should be rendered
*/
dropShadow?: boolean;
/**
* Specify the duration in milliseconds to delay before displaying the tooltip
*/
enterDelayMs?: number;
/**
* Render the component using the high-contrast theme
*/
highContrast?: boolean;
/**
* Provide the label to be rendered inside of the Tooltip. The label will use
* `aria-labelledby` and will fully describe the child node that is provided.
* This means that if you have text in the child node, that it will not be
* announced to the screen reader.
*
* Note: if label and description are both provided, description will not be
* used
*/
label?: React.ReactNode;
/**
* Specify the duration in milliseconds to delay before hiding the tooltip
*/
leaveDelayMs?: number;
}
export type TooltipProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TooltipBaseProps>;
type TooltipComponent = <T extends React.ElementType = typeof Popover>(props: TooltipProps<T>) => React.ReactElement | any;
declare const Tooltip: TooltipComponent;
export { Tooltip };