/** @module @airtable/blocks/ui: Tooltip */ /** */ import * as PropTypes from 'prop-types'; import * as React from 'react'; import { PopoverPlacementX, PopoverPlacementY, FitInWindowMode } from './popover'; import { TooltipAnchorProps } from './types/tooltip_anchor_props'; /** * Props for the {@link Tooltip} component. * * @docsPath UI/components/Tooltip */ interface TooltipProps { /** Child components to render. */ children: React.ReactElement; /** The horizontal placement of the tooltip. Defaults to {@link PopoverPlacements.RIGHT}. */ placementX?: PopoverPlacementX; /** The vertical placement of the tooltip. Defaults to {@link PopoverPlacements.CENTER}. */ placementY?: PopoverPlacementY; /** The horizontal offset, in pixels, of the tooltip. If `placementX` is set to {@link PopoverPlacements.LEFT}, a higher number will move the tooltip to the left. If `placementX` is set to {@link PopoverPlacements.RIGHT}, a higher number moves the tooltip to the right. If `placementX` is set to {@link PopoverPlacements.CENTER}, this value has no effect. Defaults to 12. */ placementOffsetX?: number; /** The vertical offset, in pixels, of the tooltip. If `placementY` is set to {@link PopoverPlacements.TOP}, a higher number will move the tooltip upward. If `placementY` is set to {@link PopoverPlacements.BOTTOM}, a higher number moves the tooltip downard. If `placementY` is set to {@link PopoverPlacements.CENTER}, this value has no effect. Defaults to 0. */ placementOffsetY?: number; /** A string representing the contents. Alternatively, you can include a function that returns a React node to place into the tooltip, which is useful for things like italicization in the tooltip. */ content?: string | (() => React.ReactElement); /** Dictates the behavior when the "normal" placement of the tooltip would be outside of the viewport. Defaults to {@link FitInWindowModes.FLIP}. */ fitInWindowMode?: FitInWindowMode; /** Should the tooltip be hidden when clicked? Defaults to `false`. */ shouldHideTooltipOnClick?: boolean; /** If set to `true`, this tooltip will not be shown. Useful when trying to disable the tooltip dynamically. */ disabled?: boolean; /** Additional class names to attach to the tooltip, separated by spaces. */ className?: string; /** Additional styles names to attach to the tooltip. */ style?: React.CSSProperties; } /** @hidden */ interface TooltipState { isShowingTooltip: boolean; } /** * A component that renders a tooltip on hover. Wraps its children. * * [[ Story id="tooltip--example" title="Tooltip example" ]] * * @docsPath UI/components/Tooltip * @component */ declare class Tooltip extends React.Component { /** @hidden */ static placements: typeof import("./popover").PopoverPlacements; /** @hidden */ static fitInWindowModes: typeof import("./popover").FitInWindowModes; /** @hidden */ static propTypes: { children: PropTypes.Validator; content: PropTypes.Requireable any)>; placementX: PropTypes.Requireable; placementY: PropTypes.Requireable; placementOffsetX: PropTypes.Requireable; placementOffsetY: PropTypes.Requireable; fitInWindowMode: PropTypes.Requireable>; shouldHideTooltipOnClick: PropTypes.Requireable; disabled: PropTypes.Requireable; className: PropTypes.Requireable; style: PropTypes.Requireable; }; /** @hidden */ static defaultProps: { placementX: import("./popover").PopoverPlacements; placementY: import("./popover").PopoverPlacements; placementOffsetX: number; placementOffsetY: number; fitInWindowMode: import("./popover").FitInWindowModes; }; /** @hidden */ constructor(props: TooltipProps); /** @internal */ _onMouseEnter(e: React.MouseEvent): void; /** @internal */ _onMouseLeave(e: React.MouseEvent): void; /** @internal */ _onClick(e: React.MouseEvent | React.KeyboardEvent): void; /** @internal */ _showTooltip(): void; /** @internal */ _hideTooltip(): void; /** @internal */ _renderTooltipContent(): JSX.Element; /** @hidden */ render(): JSX.Element; } export default Tooltip;