import React from 'react'; import { Placement, AppendTo, PopoverProps } from '../Popover/Popover.types'; export type TooltipTextAlign = 'center' | 'start'; export type TooltipSize = 'small' | 'medium'; export interface TooltipChildrenProps { onFocus: (event: React.MouseEvent, handlers?: { focus: () => void; blur: () => void; }) => void; onBlur: (event: React.MouseEvent, handlers?: { blur: () => void; }) => void; } export interface TooltipProps { /** Applies a data-hook HTML attribute to be used in the tests */ dataHook?: string; /** Applies a CSS class to the component’s root element */ className?: string; /** Defines tooltip’s trigger element */ children: React.ReactNode | React.FC; /** Defines the content to be shown inside a tooltip */ content?: React.ReactNode; /** Allows showing a tooltip when hovering on a disabled trigger element with mouse */ disabled?: boolean; /** Controls the alignment of tooltip’s content */ textAlign?: TooltipTextAlign; /** Sets time to wait before showing the tooltip (in milliseconds) */ enterDelay?: number; /** Sets time to wait before hiding the tooltip (in milliseconds) */ exitDelay?: number; /** Moves a tooltip in relation to its trigger element on x or y axis */ moveBy?: PopoverProps['moveBy']; /** Moves a tooltip’s arrow by a defined amount */ moveArrowTo?: number; /** * Calculates tooltip’s position in relation to a DOM element. * Can be either: 'window', 'scrollParent', 'viewport', 'parent', element or * function based predicate. I.e., (elm) => elm.getAttribute('data-hook') === 'value */ appendTo?: AppendTo; /** Flips a tooltip’s placement when it starts to overlap its trigger element */ flip?: boolean; /** Enables keeping a tooltip at its original placement even when it is being positioned outside the boundary */ fixed?: boolean; /** Defines max width of a tooltip in px. If content is wider than maxWidth allows, it wraps into multiple lines. * @linkTypeTo https://developer.mozilla.org/en-US/docs/Web/CSS/max-width */ maxWidth?: React.CSSProperties['maxWidth']; /** Defines a callback function on tooltip’s show event */ onShow?: () => void; /** Defines a callback function on tooltip’s hide event */ onHide?: () => void; /** Sets tooltip’s placement in relation to its trigger element */ placement?: Placement; /** Controls the size of a tooltip */ size?: TooltipSize; /** Controls the tooltip’s z-index */ zIndex?: number; /** Stretches the root element to the width of its container */ fluid?: boolean; /** Connects tooltip’s trigger element to tooltip’s label content for assistive technologies. * Use this when the action doesn't have any visual text content, i.e. Icon Button. * Currently only one, either aria-labelledby or aria-describedby is supported. * If both are provided aria-labelledby takes priority. */ 'aria-labelledby'?: string; /** Connects tooltip’s trigger element to tooltip’s descriptive content for assistive technologies. * Use this when you want to provide information in addition to actions visual information, i.e. TextButton. * Currently only one, either aria-labelledby or aria-describedby is supported. * If both are provided aria-labelledby takes priority. */ 'aria-describedby'?: string; /** * Enables inline-block behaviour for the tooltip trigger element. * Use this when working with inline based elements i.e. Text, TextButton, Button etc. */ inline?: boolean; } export type TooltipActions = { open: () => void; close: () => void; }; //# sourceMappingURL=Tooltip.types.d.ts.map