Tooltip
The Tooltip component is used to provide additional information to the user when they hover over a specific element.
import { Tooltip } from '@lobehub/ui';The Tooltip component is used to provide additional information to the user when they hover over a specific element.
import { Tooltip } from '@lobehub/ui';| Name | Description | Type | Default |
|---|---|---|---|
| style | -- | {} | -- |
| className | -- | string | -- |
| children | -- | ReactNode | -- |
| id | -- | string | -- |
| color | -- | string|blue|purple|cyan|green|magenta|pink|red|orange|yellow|volcano|geekblue|lime|gold|blue-inverse|purple-inverse|cyan-inverse|green-inverse|magenta-inverse|pink-inverse|red-inverse|orange-inverse|yellow-inverse|volcano-inverse|geekblue-inverse|lime-inverse|gold-inverse | -- |
| align | -- | {points?:string[];_experimental?:object;offset?:OffsetType[];targetOffset?:OffsetType[];overflow?:object;autoArrow?:boolean;htmlRegion?:"visible"|"scroll"|"visibleFirst";dynamicInset?:boolean;useCssRight?:boolean;useCssBottom?:boolean;useCssTransform?:boolean;ignoreShake?:boolean} | -- |
| visible | -- | boolean | -- |
| prefixCls | -- | string | -- |
| classNames | -- | {body?:any;root?:any} | -- |
| rootClassName | -- | string | -- |
| styles | -- | {body?:any;root?:any} | -- |
| animation | -- | string | -- |
| placement | -- | "top"|"bottom"|"left"|"right"|"topLeft"|"topRight"|"bottomLeft"|"bottomRight"|"leftTop"|"leftBottom"|"rightTop"|"rightBottom" | -- |
| onOpenChange | -- | (visible:boolean)=>void | -- |
| open | -- | boolean | -- |
| arrow | -- | boolean|{arrowPointAtCenter?:boolean;pointAtCenter?:boolean} | -- |
| overlayClassName | -- | string | -- |
| overlayStyle | -- | {} | -- |
| motion | Config popup motion | {motionName?:string|{appear?:string;enter?:string;leave?:string;appearActive?:string;enterActive?:string;leaveActive?:string};visible?:boolean;motionAppear?:boolean;motionEnter?:boolean;motionLeave?:boolean;motionLeaveImmediately?:boolean;motionDeadline?:number;forceRender?:boolean;removeOnLeave?:boolean;leavedClassName?:string;eventProps?:object;onAppearPrepare?:(element:HTMLElement)=>void|Promise;onEnterPrepare?:(element:HTMLElement)=>void|Promise;onLeavePrepare?:(element:HTMLElement)=>void|Promise;onAppearStart?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onEnterStart?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onLeaveStart?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onAppearActive?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onEnterActive?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onLeaveActive?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|CSSProperties;onAppearEnd?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|boolean;onEnterEnd?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|boolean;onLeaveEnd?:(element:HTMLElement,event:import("/node_modules/rc-motion/es/interface").MotionEvent)=>void|boolean;onVisibleChanged?:(visible:boolean)=>void;internalRef?:|bivarianceHack|RefObject;children?:(props:{ [key: string]: any; visible?: boolean | undefined; className?: string | undefined; style?: React.CSSProperties | undefined; },ref:(node: any) => void)=>{type:any;props:any;key:string|}} | -- |
| builtinPlacements | -- | {} | -- |
| getPopupContainer | -- | (triggerNode:HTMLElement)=>HTMLElement | -- |
| forceRender | -- | boolean | -- |
| zIndex | -- | number | -- |
| afterOpenChange | -- | (visible:boolean)=>void | -- |
| afterVisibleChange | -- | (visible:boolean)=>void | -- |
| showArrow | -- | boolean|ArrowTypeOuter | -- |
| trigger | -- | ActionType|Array<ActionType> | -- |
| transitionName | -- | string | -- |
| mouseEnterDelay | -- | number | -- |
| mouseLeaveDelay | -- | number | -- |
| openClassName | -- | string | -- |
| autoAdjustOverflow | -- | boolean|AdjustOverflow | -- |
| overlay | -- | ReactNode|RenderFunction | -- |
| onVisibleChange | -- | (visible:boolean)=>void | -- |
| defaultVisible | -- | boolean | -- |
| destroyTooltipOnHide | -- | boolean|{keepParent?:boolean} | -- |
| onPopupAlign | -- | (element:HTMLElement,align:import("/node_modules/@rc-component/trigger/lib/interface").AlignType)=>void | -- |
| fresh | Trigger will memo content when close. This may affect the case if want to keep content update. Set `fresh` to `false` will always keep update. | boolean | -- |
| popupVisible | -- | boolean | -- |
| getTooltipContainer | -- | (node:HTMLElement)=>HTMLElement | -- |
| arrowContent | -- | ReactNode | -- |
| overlayInnerStyle | -- | {} | -- |
| defaultOpen | -- | boolean | -- |
| arrowPointAtCenter | -- | boolean | -- |
| hotkey | -- | string | -- |
| hotkeyProps | -- | {} | -- |
| title | -- | ReactNode | -- |