diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 03e9099..eb02806 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -4,28 +4,132 @@ import { AlignType, AnimationType, ActionType } from 'rc-trigger/lib/interface'; import { placements } from './placements'; import Content from './Content'; +/** + * Where to place the tooltop. One of + * 'left' |'right' |'top' |'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; + */ +type Placement = + | 'left' + | 'right' + | 'top' + | 'bottom' + | 'topLeft' + | 'topRight' + | 'bottomLeft' + | 'bottomRight'; + export interface TooltipProps extends Pick { - trigger?: ActionType; - defaultVisible?: boolean; - visible?: boolean; - placement?: string; - transitionName?: string; - animation?: AnimationType; - onVisibleChange?: (visible: boolean) => void; + /** + * Call after visible is changed + */ afterVisibleChange?: () => void; - overlay: (() => React.ReactNode) | React.ReactNode; - overlayStyle?: React.CSSProperties; - overlayClassName?: string; - prefixCls?: string; - mouseEnterDelay?: number; - mouseLeaveDelay?: number; - getTooltipContainer?: (node: HTMLElement) => HTMLElement; - destroyTooltipOnHide?: boolean; + /** + * value will be merged into placement's config + */ align?: AlignType; + + /** + * + */ + animation?: AnimationType; + + /** + * Arrow content, a react component + * @default null + */ arrowContent?: React.ReactElement; - id?: string; + children?: React.ReactElement; + + /** + * Whether tooltip is visible initially + * @efaults false + */ + defaultVisible?: boolean; + + /** + * Whether destroy tooltip when tooltip is hidden + * @default false + */ + destroyTooltipOnHide?: boolean; + + /** + * Function returning html node which will act as tooltip container. + * By default the tooltip attaches to the body. + * If you want to change the container, simply return a new element. + */ + getTooltipContainer?: (node: HTMLElement) => HTMLElement; + + /** + * Id which gets attached to the tooltip content. + * Can be used with aria-describedby to achieve Screenreader-Support. + */ + id?: string; + + /** + * Delay time to show when mouse enter.unit: s. + * @default 0 + */ + mouseEnterDelay?: number; + + /** + * Delay time to hide when mouse leave.unit: s. + * @default 0.1 + */ + mouseLeaveDelay?: number; + + /** + * Call when visible is changed + */ + onVisibleChange?: (visible: boolean) => void; + + /** + * React component to render in the popup + */ + overlay: (() => React.ReactNode) | React.ReactNode; + + /** + * Additional className added to popup overlay + */ + overlayClassName?: string; + + /** + * Additional style of overlay node + */ + overlayStyle?: React.CSSProperties; + + /** + * Where to place the tooltop. One of + * 'left' |'right' |'top' |'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; + */ + placement?: Placement; + + /** + * + */ popupVisible?: boolean; + + /** + * prefix class name. + * @default "rc-tooltip" + */ + prefixCls?: string; + + /** + * same as https://github.com/react-component/animate + */ + transitionName?: string; + + /** + * Which actions cause tooltip shown. enum of 'hover','click','focus' + * @default 'hover' + */ + trigger?: ActionType; + + /** + * call when visible is changed + */ + visible?: boolean; } const Tooltip = (props: TooltipProps, ref) => {