@cimpress/react-components
Version:
React components to support the MCP styleguide
62 lines • 2.23 kB
TypeScript
import React, { CSSProperties, ReactNode } from 'react';
import { Direction } from './common';
import { PublicComponentProps } from './types';
type ContraintsTo = string | 'window' | 'scrollParent' | HTMLElement;
type Constraints = {
to?: ContraintsTo;
attachment?: string | 'together';
outOfBoundsClass?: string;
pinnedClass?: string;
pin?: boolean | string[];
};
export interface TooltipProps extends PublicComponentProps {
/**
* DOM node for the tooltip to appear anchored to.
*/
children: ReactNode;
/**
* Allows the user to completely override the Tether constraints array for uniquely positioned tooltips. See the Tether.io documenation here.
*/
constraints?: Constraints[];
/**
* Can be used to add class names to the tooltip target container.
*/
containerClassName?: string;
/**
* Contents for the tooltip.
*/
contents?: ReactNode;
/**
* One of top, right, bottom, or left, tells the tooltip which direction to default to.
*/
direction?: Direction;
/**
* Delay (in milliseconds) after which the tooltip will be shown.
*/
delay?: number;
/**
* If provided, a function to be called when a click occurs outside of this component.
*/
onClickOutside?: () => void;
/**
* Can be used to customize when the tooltip displays. If this prop is used, the default mouseover behavior will be disabled.
*/
show?: boolean;
/**
* Can be used to add styles to the tooltip component.
*/
tooltipStyle?: CSSProperties;
/**
* Can be used to add styles to the tooltip component.
*/
tooltipInnerStyle?: CSSProperties;
/**
* Controls the appearance. One of tooltip or popover. (Deprecated. Use `variant` instead.)
*/
variety?: string;
variant?: 'tooltip' | 'popover';
outsideClickIgnoreClass?: string;
}
export declare const Tooltip: ({ children, contents, direction, style, className, containerClassName, variety, variant, tooltipStyle, tooltipInnerStyle, show, delay, constraints, onClickOutside, outsideClickIgnoreClass, ...rest }: TooltipProps) => React.JSX.Element;
export {};
//# sourceMappingURL=Tooltip.d.ts.map