@carbon/react
Version:
React components for the Carbon Design System
110 lines (109 loc) • 4.15 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2026
*
* 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 PropTypes from 'prop-types';
import React from 'react';
import { PopoverAlignment } from '../Popover';
export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'classname' | 'children' | 'type'> {
/**
* Specify how the trigger should align with the tooltip
*/
align?: PopoverAlignment;
/**
* Will auto-align Definition Tooltip. This prop is currently experimental
* and is subject to future changes. Requires React v17+
* @see https://github.com/carbon-design-system/carbon/issues/18714
*/
autoAlign?: boolean;
/**
* The `children` prop will be used as the value that is being defined
*/
children: React.ReactNode;
/**
* Specify an optional className to be applied to the container node
*/
className?: string;
/**
* Specify whether the tooltip should be open when it first renders
*/
defaultOpen?: boolean;
/**
* The `definition` prop is used as the content inside of the tooltip that
* appears when a user interacts with the element rendered by the `children`
* prop
*/
definition: React.ReactNode;
/**
* Provide a value that will be assigned as the id of the tooltip
*/
id?: string;
/**
* Specifies whether or not the `DefinitionTooltip` should open on hover or not
*/
openOnHover?: boolean;
/**
* @deprecated [Deprecated in v11] Please use the `definition` prop instead.
*
* Provide the text that will be displayed in the tooltip when it is rendered.
*/
tooltipText?: React.ReactNode;
/**
* The CSS class name of the trigger element
*/
triggerClassName?: string;
}
declare const DefinitionTooltip: {
({ align, autoAlign, className, children, definition, defaultOpen, id, openOnHover, tooltipText, triggerClassName, ...rest }: DefinitionTooltipProps): import("react/jsx-runtime").JSX.Element;
propTypes: {
/**
* Specify how the trigger should align with the tooltip
*/
align: PropTypes.Requireable<string>;
/**
* Will auto-align the popover. This prop is currently experimental and is
* subject to future changes. Requires React v17+
* @see https://github.com/carbon-design-system/carbon/issues/18714
*/
autoAlign: PropTypes.Requireable<boolean>;
/**
* The `children` prop will be used as the value that is being defined
*/
children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
/**
* Specify an optional className to be applied to the container node
*/
className: PropTypes.Requireable<string>;
/**
* Specify whether the tooltip should be open when it first renders
*/
defaultOpen: PropTypes.Requireable<boolean>;
/**
* The `definition` prop is used as the content inside of the tooltip that
* appears when a user interacts with the element rendered by the `children`
* prop
*/
definition: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
/**
* Provide a value that will be assigned as the id of the tooltip
*/
id: PropTypes.Requireable<string>;
/**
* Specifies whether or not the `DefinitionTooltip` should open on hover or not
*/
openOnHover: PropTypes.Requireable<boolean>;
/**
* [Deprecated in v11] Please use the `definition` prop instead.
*
* Provide the text that will be displayed in the tooltip when it is rendered.
*/
tooltipText: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
/**
* The CSS class name of the trigger element
*/
triggerClassName: PropTypes.Requireable<string>;
};
};
export { DefinitionTooltip };