diff --git a/components/tooltip/PropsType.tsx b/components/tooltip/PropsType.tsx index 2648d63c..d724e8e4 100644 --- a/components/tooltip/PropsType.tsx +++ b/components/tooltip/PropsType.tsx @@ -39,6 +39,7 @@ export type TooltipProps = { content: ReactNode style?: StyleProp styles?: Partial + crossOffset?: CrossOffset } export type TooltipRef = { @@ -61,3 +62,8 @@ export type TooltipMenuProps = Omit & { maxCount?: number onAction?: (item: Action) => void } + +export type CrossOffset = { + top: number + left: number +} diff --git a/components/tooltip/Tooltip.tsx b/components/tooltip/Tooltip.tsx index cddd76c4..1a0e0e47 100644 --- a/components/tooltip/Tooltip.tsx +++ b/components/tooltip/Tooltip.tsx @@ -24,7 +24,7 @@ import AntmView from '../view' import useClickAway from '../_util/hooks/useClickAway' import useScroll from '../_util/hooks/useScroll' import Portal from '../portal' -import { Placement, TooltipProps, TooltipRef } from './PropsType' +import { CrossOffset, Placement, TooltipProps, TooltipRef } from './PropsType' import Wrapper from './Wrapper' import { normalizePlacement } from './normalize-placement' import TooltipStyles from './style' @@ -34,6 +34,7 @@ const defaultProps = { defaultVisible: false, trigger: 'onPress', mode: 'light', + crossOffset: { top: StatusBar.currentHeight, left: 0 } as CrossOffset, } const InternalTooltip: React.ForwardRefRenderFunction< @@ -44,6 +45,7 @@ const InternalTooltip: React.ForwardRefRenderFunction< const { mode, + crossOffset, styles, visible: pvisible, defaultVisible, @@ -102,7 +104,6 @@ const InternalTooltip: React.ForwardRefRenderFunction< useEffect(update, [update, floatingStyles, content]) // Replace `useLayoutEffect(update)` to improve performance useScroll(scrollProps.onScroll) - const [{ stopPropagation }] = useClickAway(() => { setVisible(false) }) @@ -171,7 +172,10 @@ const InternalTooltip: React.ForwardRefRenderFunction< + style={{ + marginTop: crossOffset.top, + marginLeft: crossOffset.left, + }}> void` | - | | placement | The position of the Tooltip | `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'` | `'top'` | | styles | Semantic DOM style | [TooltipStyle](#tooltipstyle-interface) | - | @@ -95,7 +96,7 @@ const element = - {element} // ❌ DO NOT USE + {element} // ❌ DO NOT USE // ✅ YES ``` @@ -115,4 +116,4 @@ const CustomButton = (props: { defaultVisible> press -``` \ No newline at end of file +``` diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index 873843df..1f212141 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -13,17 +13,18 @@ version: 5.2.1 ### Tooltip -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| children | 触发 `Tooltip` 的元素 | `React.ReactElement` | - | -| content | 弹出内容 | `React.ReactNode` | - | -| defaultVisible | 默认是否显隐 | `boolean` | `false` | -| mode | 设置亮色模式或者黑色模式 | `'light' | 'dark'` | `'light'` | -| onVisibleChange | 显示隐藏的回调 | `(visible: boolean) => void` | - | -| placement | 气泡框位置 | `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'` | `'top'` | -| styles | 语义化结构 style | [TooltipStyle](/#tooltipstyle-语义化样式) | - | -| trigger | 触发方式 | `'onPress'` | - | -| visible | 受控模式下,是否展示弹出内容 | `boolean` | - | +| 属性 | 说明 | 类型 | 默认值 | +| --- |------------------|--------------------------------------| --- | +| children | 触发 `Tooltip` 的元素 | `React.ReactElement` | - | +| content | 弹出内容 | `React.ReactNode` | - | +| defaultVisible | 默认是否显隐 | `boolean` | `false` | +| mode | 设置亮色模式或者黑色模式 | `'light' | 'dark'` | `'light'` | +| crossOffset | 设置弹窗位置的偏移量;top: 沿元素和其触发元素之间的主轴应用的附加偏移。left: 沿元素和其触发元素之间的横轴应用的附加偏移。 | `{ top: number, left: number }` | `'{ top: StatusBar.currentHeight, left: 0 } '` | +| onVisibleChange | 显示隐藏的回调 | `(visible: boolean) => void` | - | +| placement | 气泡框位置 | `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'` | `'top'` | +| styles | 语义化结构 style | [TooltipStyle](/#tooltipstyle-语义化样式) | - | +| trigger | 触发方式 | `'onPress'` | - | +| visible | 受控模式下,是否展示弹出内容 | `boolean` | - | ### Ref @@ -96,7 +97,7 @@ const element = - {element} // ❌ DO NOT USE + {element} // ❌ DO NOT USE // ✅ YES ``` @@ -116,4 +117,4 @@ const CustomButton = (props: { defaultVisible> press -``` \ No newline at end of file +```