feat(Tooltip): 支持自定义挂载节点

Author: CoderTongxin

packages/devui-vue/devui/tooltip/src/tooltip-types.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, ExtractPropTypes, PropType, Ref } from 'vue';
+import type { ComputedRef, ExtractPropTypes, PropType, Ref, TeleportProps } from 'vue';
 
 export type Alignment = 'start' | 'end';
 export type BasePlacement =
@@ -56,6 +56,10 @@ export const tooltipProps = {
     type: String,
     default: '',
   },
+  teleport: {
+    type: [String, HTMLElement] as PropType<TeleportProps['to']>,
+    default: 'body',
+  },
 };
 
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>;

packages/devui-vue/devui/tooltip/src/tooltip.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
   name: 'DTooltip',
   props: tooltipProps,
   setup(props: TooltipProps, { slots }) {
-    const { showAnimation, content, align, overlayClass } = toRefs(props);
+    const { showAnimation, content, align, overlayClass, teleport } = toRefs(props);
     const origin = ref<HTMLElement>();
     const tooltipRef = ref<HTMLElement>();
     const { visible, placement, positionArr, overlayStyles, onPositionChange, onMouseleave, onMouseenterOverlay } = useTooltip(
@@ -30,7 +30,7 @@ export default defineComponent({
     return () => (
       <>
         <PopperTrigger>{slots.default?.()}</PopperTrigger>
-        <Teleport to="body">
+        <Teleport to={teleport.value}>
           <Transition name={showAnimation.value ? ns.m(`fade-${placement.value}`) : ''}>
             <FlexibleOverlay
               v-model={visible.value}

packages/devui-vue/docs/components/tooltip/index.md

@@ -125,18 +125,19 @@ export default defineComponent({
 
 ### Tooltip 参数
 
-| 参数名            | 类型                                               | 默认值 | 说明                                              | 跳转 Demo             |
-| :---------------- | :------------------------------------------------- | :----- | :------------------------------------------------ | :-------------------- |
-| content           | `string`                                           | --     | 可选，Tooltip 显示内容                            | [基本用法](#基本用法) |
-| position          | [BasePlacement \| BasePlacement[]](#baseplacement) | top    | 可选，Tooltip 显示位置                            | [基本用法](#基本用法) |
-| align             | `start \| end \| null`                             | null   | 可选，对齐方式，默认居中对齐。                    |                       |
-| show-animation    | `boolean`                                          | true   | 可选，是否显示动画                                | [基本用法](#基本用法) |
-| mouse-enter-delay | `number`                                           | 150    | 可选，鼠标移入后延时多久才显示 Tooltip，单位是 ms | [延时触发](#延时触发) |
-| mouse-leave-delay | `number`                                           | 100    | 可选，鼠标移出后延时多久才隐藏 Tooltip，单位是 ms | [延时触发](#延时触发) |
-| disabled          | `boolean`                                          | false  | 可选，Tooltip 是否可用                            | [基本用法](#基本用法) |
-| enterable         | `boolean`                                          | true   | 可选，鼠标是否可以进入到 tooltip 中               | [基本用法](#基本用法) |
-| hide-after        | `number`                                           | 0      | 可选，tooltip 出现后自动隐藏延时，单位为 ms       | [基本用法](#基本用法) |
-| overlay-class     | `string`                                           | ''     | 可选，自定义弹出层的样式                          |                       |
+| 参数名            | 类型                                               | 默认值 | 说明                                                                                                              | 跳转 Demo             |
+| :---------------- | :------------------------------------------------- | :----- | :---------------------------------------------------------------------------------------------------------------- | :-------------------- |
+| content           | `string`                                           | --     | 可选，Tooltip 显示内容                                                                                            | [基本用法](#基本用法) |
+| position          | [BasePlacement \| BasePlacement[]](#baseplacement) | top    | 可选，Tooltip 显示位置                                                                                            | [基本用法](#基本用法) |
+| align             | `start \| end \| null`                             | null   | 可选，对齐方式，默认居中对齐。                                                                                    |                       |
+| show-animation    | `boolean`                                          | true   | 可选，是否显示动画                                                                                                | [基本用法](#基本用法) |
+| mouse-enter-delay | `number`                                           | 150    | 可选，鼠标移入后延时多久才显示 Tooltip，单位是 ms                                                                 | [延时触发](#延时触发) |
+| mouse-leave-delay | `number`                                           | 100    | 可选，鼠标移出后延时多久才隐藏 Tooltip，单位是 ms                                                                 | [延时触发](#延时触发) |
+| disabled          | `boolean`                                          | false  | 可选，Tooltip 是否可用                                                                                            | [基本用法](#基本用法) |
+| enterable         | `boolean`                                          | true   | 可选，鼠标是否可以进入到 tooltip 中                                                                               | [基本用法](#基本用法) |
+| hide-after        | `number`                                           | 0      | 可选，tooltip 出现后自动隐藏延时，单位为 ms                                                                       | [基本用法](#基本用法) |
+| overlay-class     | `string`                                           | ''     | 可选，自定义弹出层的样式                                                                                          |                       |
+| teleport          | `string \| HTMLElement`                            | 'body' | 可选，挂载节点，等同于 Teleport 组件的[to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) |
 
 ### Tooltip 插槽