@antsoo-lib/components 0.1.11 → 0.1.13

package/src/tooltip/Tooltip.tsx

@@ -1,322 +0,0 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-import { computed, defineComponent, ref, watch } from 'vue'
-
-import classNames from '../_util/classNames'
-import firstNotUndefined from '../_util/firstNotUndefined'
-import getPlacements from '../_util/placements'
-import {
-  filterEmpty,
-  getStyle,
-  initDefaultProps,
-  isFragment,
-  isValidElement,
-} from '../_util/props-util'
-import raf from '../_util/raf'
-import { getTransitionName } from '../_util/transition'
-import type { CustomSlotsType } from '../_util/type'
-import { cloneElement } from '../_util/vnode'
-import PropTypes from '../_util/vue-types'
-import warning from '../_util/warning'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import VcTooltip from '../vc-tooltip'
-import abstractTooltipProps from './abstractTooltipProps'
-import useStyle from './style'
-import { parseColor } from './util'
-
-export type { TooltipPlacement, TriggerType } from './abstractTooltipProps'
-
-export type { AdjustOverflow, PlacementsConfig } from '../_util/placements'
-
-// https://github.com/react-component/tooltip
-// https://github.com/yiminghe/dom-align
-export interface TooltipAlignConfig {
-  points?: [string, string]
-  offset?: [number | string, number | string]
-  targetOffset?: [number | string, number | string]
-  overflow?: { adjustX: boolean; adjustY: boolean }
-  useCssRight?: boolean
-  useCssBottom?: boolean
-  useCssTransform?: boolean
-}
-const splitObject = <T extends CSSProperties>(
-  obj: T,
-  keys: (keyof T)[],
-): Record<'picked' | 'omitted', T> => {
-  const picked: T = {} as T
-  const omitted: T = { ...obj }
-  keys.forEach((key) => {
-    if (obj && key in obj) {
-      picked[key] = obj[key]
-      delete omitted[key]
-    }
-  })
-  return { picked, omitted }
-}
-
-export const tooltipProps = () => ({
-  ...abstractTooltipProps(),
-  title: PropTypes.any,
-})
-
-export const tooltipDefaultProps = () => ({
-  trigger: 'hover',
-  align: {},
-  placement: 'top',
-  mouseEnterDelay: 0.1,
-  mouseLeaveDelay: 0.1,
-  arrowPointAtCenter: false,
-  autoAdjustOverflow: true,
-})
-
-export type TooltipProps = Partial<ExtractPropTypes<ReturnType<typeof tooltipProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ATooltip',
-  inheritAttrs: false,
-  props: initDefaultProps(tooltipProps(), {
-    trigger: 'hover',
-    align: {},
-    placement: 'top',
-    mouseEnterDelay: 0.1,
-    mouseLeaveDelay: 0.1,
-    arrowPointAtCenter: false,
-    autoAdjustOverflow: true,
-  }),
-  slots: Object as CustomSlotsType<{
-    title?: any
-    default?: any
-  }>,
-  // emits: ['update:visible', 'visibleChange'],
-  setup(props, { slots, emit, attrs, expose }) {
-    if (process.env.NODE_ENV !== 'production') {
-      ;[
-        ['visible', 'open'],
-        ['onVisibleChange', 'onOpenChange'],
-      ].forEach(([deprecatedName, newName]) => {
-        warning(
-          props[deprecatedName] === undefined,
-          'Tooltip',
-          `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
-        )
-      })
-    }
-
-    const { prefixCls, getPopupContainer, direction, rootPrefixCls } = useConfigInject(
-      'tooltip',
-      props,
-    )
-    const mergedOpen = computed(() => props.open ?? props.visible)
-    const innerOpen = ref(firstNotUndefined([props.open, props.visible]))
-
-    const tooltip = ref()
-
-    let rafId: any
-    watch(mergedOpen, (val) => {
-      raf.cancel(rafId)
-      rafId = raf(() => {
-        innerOpen.value = !!val
-      })
-    })
-    const isNoTitle = () => {
-      const title = props.title ?? slots.title
-      return !title && title !== 0
-    }
-
-    const handleVisibleChange = (val: boolean) => {
-      const noTitle = isNoTitle()
-      if (mergedOpen.value === undefined) {
-        innerOpen.value = noTitle ? false : val
-      }
-      if (!noTitle) {
-        emit('update:visible', val)
-        emit('visibleChange', val)
-        emit('update:open', val)
-        emit('openChange', val)
-      }
-    }
-
-    const getPopupDomNode = () => {
-      return tooltip.value.getPopupDomNode()
-    }
-
-    expose({
-      getPopupDomNode,
-      open: innerOpen,
-      forcePopupAlign: () => tooltip.value?.forcePopupAlign(),
-    })
-
-    const tooltipPlacements = computed(() => {
-      const { builtinPlacements, autoAdjustOverflow, arrow, arrowPointAtCenter } = props
-      let mergedArrowPointAtCenter = arrowPointAtCenter
-
-      if (typeof arrow === 'object') {
-        mergedArrowPointAtCenter = arrow.pointAtCenter ?? arrowPointAtCenter
-      }
-      return (
-        builtinPlacements ||
-        getPlacements({
-          arrowPointAtCenter: mergedArrowPointAtCenter,
-          autoAdjustOverflow,
-        })
-      )
-    })
-    const isTrueProps = (val: boolean | '') => {
-      return val || val === ''
-    }
-    const getDisabledCompatibleChildren = (ele: any) => {
-      const elementType = ele.type as any
-      if (typeof elementType === 'object' && ele.props) {
-        if (
-          ((elementType.__ANT_BUTTON === true || elementType === 'button') &&
-            isTrueProps(ele.props.disabled)) ||
-          (elementType.__ANT_SWITCH === true &&
-            (isTrueProps(ele.props.disabled) || isTrueProps(ele.props.loading))) ||
-          (elementType.__ANT_RADIO === true && isTrueProps(ele.props.disabled))
-        ) {
-          // Pick some layout related style properties up to span
-          // Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
-          const { picked, omitted } = splitObject(getStyle(ele), [
-            'position',
-            'left',
-            'right',
-            'top',
-            'bottom',
-            'float',
-            'display',
-            'zIndex',
-          ])
-          const spanStyle: CSSProperties = {
-            display: 'inline-block', // default inline-block is important
-            ...picked,
-            cursor: 'not-allowed',
-            lineHeight: 1, // use the true height of child nodes
-            width: ele.props && ele.props.block ? '100%' : undefined,
-          }
-          const buttonStyle: CSSProperties = {
-            ...omitted,
-            pointerEvents: 'none',
-          }
-          const child = cloneElement(
-            ele,
-            {
-              style: buttonStyle,
-            },
-            true,
-          )
-          return (
-            <span style={spanStyle} class={`${prefixCls.value}-disabled-compatible-wrapper`}>
-              {child}
-            </span>
-          )
-        }
-      }
-      return ele
-    }
-
-    const getOverlay = () => {
-      return props.title ?? slots.title?.()
-    }
-
-    const onPopupAlign = (domNode: HTMLElement, align: any) => {
-      const placements = tooltipPlacements.value
-      // 当前返回的位置
-      const placement = Object.keys(placements).find(
-        (key) =>
-          placements[key].points[0] === align.points?.[0] &&
-          placements[key].points[1] === align.points?.[1],
-      )
-      if (placement) {
-        // 根据当前坐标设置动画点
-        const rect = domNode.getBoundingClientRect()
-        const transformOrigin = {
-          top: '50%',
-          left: '50%',
-        }
-        if (placement.includes('top') || placement.includes('Bottom')) {
-          transformOrigin.top = `${rect.height - align.offset[1]}px`
-        } else if (placement.includes('Top') || placement.includes('bottom')) {
-          transformOrigin.top = `${-align.offset[1]}px`
-        }
-        if (placement.includes('left') || placement.includes('Right')) {
-          transformOrigin.left = `${rect.width - align.offset[0]}px`
-        } else if (placement.includes('right') || placement.includes('Left')) {
-          transformOrigin.left = `${-align.offset[0]}px`
-        }
-        domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`
-      }
-    }
-    const colorInfo = computed(() => parseColor(prefixCls.value, props.color))
-    const injectFromPopover = computed(() => (attrs as any)['data-popover-inject'])
-    const [wrapSSR, hashId] = useStyle(
-      prefixCls,
-      computed(() => !injectFromPopover.value),
-    )
-    return () => {
-      const { openClassName, overlayClassName, overlayStyle, overlayInnerStyle } = props
-      let children = filterEmpty(slots.default?.()) ?? null
-      children = children.length === 1 ? children[0] : children
-
-      let tempVisible = innerOpen.value
-      // Hide tooltip when there is no title
-      if (mergedOpen.value === undefined && isNoTitle()) {
-        tempVisible = false
-      }
-      if (!children) {
-        return null
-      }
-      const child = getDisabledCompatibleChildren(
-        isValidElement(children) && !isFragment(children) ? children : <span>{children}</span>,
-      )
-      const childCls = classNames({
-        [openClassName || `${prefixCls.value}-open`]: true,
-        [child.props && child.props.class]: child.props && child.props.class,
-      })
-      const customOverlayClassName = classNames(
-        overlayClassName,
-        {
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        },
-
-        colorInfo.value.className,
-        hashId.value,
-      )
-      const formattedOverlayInnerStyle = {
-        ...colorInfo.value.overlayStyle,
-        ...overlayInnerStyle,
-      }
-      const arrowContentStyle = colorInfo.value.arrowStyle
-      const vcTooltipProps = {
-        ...attrs,
-        ...(props as TooltipProps),
-        prefixCls: prefixCls.value,
-        arrow: !!props.arrow,
-        getPopupContainer: getPopupContainer?.value,
-        builtinPlacements: tooltipPlacements.value,
-        visible: tempVisible,
-        ref: tooltip,
-        overlayClassName: customOverlayClassName,
-        overlayStyle: { ...arrowContentStyle, ...overlayStyle },
-        overlayInnerStyle: formattedOverlayInnerStyle,
-        onVisibleChange: handleVisibleChange,
-        onPopupAlign,
-        transitionName: getTransitionName(
-          rootPrefixCls.value,
-          'zoom-big-fast',
-          props.transitionName,
-        ),
-      }
-      return wrapSSR(
-        <VcTooltip
-          {...vcTooltipProps}
-          v-slots={{
-            arrowContent: () => <span class={`${prefixCls.value}-arrow-content`}></span>,
-            overlay: getOverlay,
-          }}
-        >
-          {innerOpen.value ? cloneElement(child, { class: childCls }) : child}
-        </VcTooltip>,
-      )
-    }
-  },
-})

package/src/tooltip/abstractTooltipProps.ts

@@ -1,61 +0,0 @@
-import type { CSSProperties, PropType } from 'vue'
-
-import type { PresetColorType } from '../_util/colors'
-import type { AdjustOverflow } from '../_util/placements'
-import type { LiteralUnion } from '../_util/type'
-import { objectType } from '../_util/type'
-import type { AlignType, BuildInPlacements } from '../vc-trigger/interface'
-
-export type TriggerType = 'hover' | 'focus' | 'click' | 'contextmenu'
-
-export type TooltipPlacement =
-  | 'top'
-  | 'left'
-  | 'right'
-  | 'bottom'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'leftTop'
-  | 'leftBottom'
-  | 'rightTop'
-  | 'rightBottom'
-
-export default () => ({
-  trigger: [String, Array] as PropType<TriggerType | TriggerType[]>,
-  open: { type: Boolean, default: undefined },
-  /** @deprecated Please use `open` instead. */
-  visible: { type: Boolean, default: undefined },
-  placement: String as PropType<TooltipPlacement>,
-  color: String as PropType<LiteralUnion<PresetColorType>>,
-  transitionName: String,
-  overlayStyle: objectType<CSSProperties>(),
-  overlayInnerStyle: objectType<CSSProperties>(),
-  overlayClassName: String,
-  openClassName: String,
-  prefixCls: String,
-  mouseEnterDelay: Number,
-  mouseLeaveDelay: Number,
-  getPopupContainer: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
-  /**@deprecated Please use `arrow={{ pointAtCenter: true }}` instead. */
-  arrowPointAtCenter: { type: Boolean, default: undefined },
-  arrow: {
-    type: [Boolean, Object] as PropType<boolean | { pointAtCenter?: boolean }>,
-    default: true as boolean | { pointAtCenter?: boolean },
-  },
-  autoAdjustOverflow: {
-    type: [Boolean, Object] as PropType<boolean | AdjustOverflow>,
-    default: undefined as boolean | AdjustOverflow,
-  },
-  destroyTooltipOnHide: { type: Boolean, default: undefined },
-  align: objectType<AlignType>(),
-  builtinPlacements: objectType<BuildInPlacements>(),
-  children: Array,
-  /** @deprecated Please use `onOpenChange` instead. */
-  onVisibleChange: Function as PropType<(vis: boolean) => void>,
-  /** @deprecated Please use `onUpdate:open` instead. */
-  'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
-  onOpenChange: Function as PropType<(vis: boolean) => void>,
-  'onUpdate:open': Function as PropType<(vis: boolean) => void>,
-})

package/src/tooltip/index.en-US.md

@@ -1,52 +0,0 @@
----
-category: Components
-type: Data Display
-title: Tooltip
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3u9eSZO_4c0AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gwrhTozoTC4AAAAAAAAAAAAADrJ8AQ/original
----
-
-A simple text popup tip.
-
-## When To Use
-
-- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
-- To provide an explanation of a 'button/text/operation'. It's often used instead of the html 'title' attribute.
-
-## API
-
-| Property | Description                   | Type         | Default |
-| -------- | ----------------------------- | ------------ | ------- |
-| title    | The text shown in the tooltip | string\|slot | -       |
-
-### Common API
-
-The following APIs are shared by Tooltip, Popconfirm, Popover.
-
-| Property             | Description                                                                                                                                                                                           | Type                                           | Default             | Version |
-| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------- | ------- |
-| align                | this value will be merged into placement's config, please refer to the settings [dom-align](https://github.com/yiminghe/dom-align)                                                                    | Object                                         | -                   |         |
-| arrowPointAtCenter   | Whether the arrow is pointed at the center of target                                                                                                                                                  | boolean                                        | `false`             |         |
-| arrow                | Change arrow's visible state and change whether the arrow is pointed at the center of target.                                                                                                         | boolean \| { pointAtCenter: boolean}           | `true`              | 4.2.0   |
-| autoAdjustOverflow   | Whether to adjust popup placement automatically when popup is off screen                                                                                                                              | boolean                                        | `true`              |         |
-| color                | The background color                                                                                                                                                                                  | string                                         | -                   |         |
-| destroyTooltipOnHide | Whether to destroy tooltip on hide                                                                                                                                                                    | boolean                                        | false               |         |
-| getPopupContainer    | The DOM container of the tip, the default behavior is to create a `div` element in `body`.                                                                                                            | (triggerNode: HTMLElement) => HTMLElement      | () => document.body |         |
-| mouseEnterDelay      | Delay in seconds, before tooltip is shown on mouse enter                                                                                                                                              | number                                         | 0.1                 |         |
-| mouseLeaveDelay      | Delay in seconds, before tooltip is hidden on mouse leave                                                                                                                                             | number                                         | 0.1                 |         |
-| overlayClassName     | Class name of the tooltip card                                                                                                                                                                        | string                                         | -                   |         |
-| overlayStyle         | Style of the tooltip card                                                                                                                                                                             | object                                         | -                   |         |
-| overlayInnerStyle    | Style of the tooltip inner content                                                                                                                                                                    | object                                         | -                   | 4.0.0   |
-| placement            | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string                                         | `top`               |         |
-| trigger              | Tooltip trigger mode                                                                                                                                                                                  | `hover` \| `focus` \| `click` \| `contextmenu` | `hover`             |         |
-| open(v-model)        | Whether the floating tooltip card is open or not, Use `visible` under 4.0.0                                                                                                                           | boolean                                        | `false`             | 4.0.0   |
-
-### events
-
-| Events Name | Description                                                      | Arguments         | Version |
-| ----------- | ---------------------------------------------------------------- | ----------------- | ------- |
-| openChange  | Callback executed when visibility of the tooltip card is changed | (visible) => void | 4.0     |
-
-## Note
-
-Please ensure that the child node of `Tooltip` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.

package/src/tooltip/index.ts

@@ -1,14 +0,0 @@
-import { withInstall } from '../_util/type'
-import ToolTip, { tooltipProps } from './Tooltip'
-
-export type {
-  AdjustOverflow,
-  PlacementsConfig,
-  TooltipAlignConfig,
-  TooltipPlacement,
-  TooltipProps,
-} from './Tooltip'
-
-export { tooltipProps }
-
-export default withInstall(ToolTip)

package/src/tooltip/index.zh-CN.md

@@ -1,53 +0,0 @@
----
-category: Components
-type: 数据展示
-title: Tooltip
-subtitle: 文字提示
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3u9eSZO_4c0AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gwrhTozoTC4AAAAAAAAAAAAADrJ8AQ/original
----
-
-警告提示，展现需要关注的信息。
-
-## 何时使用
-
-- 当某个页面需要向用户显示警告的信息时。
-- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
-
-## API
-
-| 参数  | 说明     | 类型         | 默认值 |
-| ----- | -------- | ------------ | ------ |
-| title | 提示文字 | string\|slot | -      |
-
-### 共同的 API
-
-以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
-
-| 参数                 | 说明                                                                                                                                           | 类型                                      | 默认值              | 版本  |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------- | ----- |
-| align                | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align)                                                   | Object                                    | -                   |       |
-| arrowPointAtCenter   | 箭头是否指向目标元素中心                                                                                                                       | boolean                                   | `false`             |       |
-| arrow                | 修改箭头的显示状态以及修改箭头是否指向目标元素中心                                                                                             | boolean \| { pointAtCenter: boolean}      | `true`              | 4.2.0 |
-| autoAdjustOverflow   | 气泡被遮挡时自动调整位置                                                                                                                       | boolean                                   | `true`              |       |
-| color                | 背景颜色                                                                                                                                       | string                                    | -                   |       |
-| destroyTooltipOnHide | 隐藏后是否销毁 tooltip                                                                                                                         | boolean                                   | false               |       |
-| getPopupContainer    | 浮层渲染父节点，默认渲染到 body 上                                                                                                             | (triggerNode: HTMLElement) => HTMLElement | () => document.body |       |
-| mouseEnterDelay      | 鼠标移入后延时多少才显示 Tooltip，单位：秒                                                                                                     | number                                    | 0.1                 |       |
-| mouseLeaveDelay      | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒                                                                                                     | number                                    | 0.1                 |       |
-| overlayClassName     | 卡片类名                                                                                                                                       | string                                    | -                   |       |
-| overlayStyle         | 卡片样式                                                                                                                                       | object                                    | -                   |       |
-| overlayInnerStyle    | 卡片内容区域样式                                                                                                                               | object                                    | -                   | 4.0   |
-| placement            | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string                                    | top                 |       |
-| trigger              | 触发行为，可选 `hover/focus/click/contextmenu`                                                                                                 | string                                    | hover               |       |
-| open(v-model)        | 用于手动控制浮层显隐, 小于 4.0.0 使用 `visible`                                                                                                | boolean                                   | false               | 4.0   |
-
-### 事件
-
-| 事件名称   | 说明           | 回调参数          | 版本 |
-| ---------- | -------------- | ----------------- | ---- |
-| openChange | 显示隐藏的回调 | (visible) => void | 4.0  |
-
-## 注意
-
-请确保 `Tooltip` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。

package/src/tooltip/style/index.ts

@@ -1,158 +0,0 @@
-import type { Ref } from 'vue'
-
-import { genPresetColor, resetComponent } from '../../style'
-import { initZoomMotion } from '../../style/motion'
-import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow'
-import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {
-  zIndexPopup: number
-  colorBgDefault: string
-}
-
-interface TooltipToken extends FullToken<'Tooltip'> {
-  // default variables
-  tooltipMaxWidth: number
-  tooltipColor: string
-  tooltipBg: string
-  tooltipBorderRadius: number
-  tooltipRadiusOuter: number
-}
-
-const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
-  const {
-    componentCls, // ant-tooltip
-    tooltipMaxWidth,
-    tooltipColor,
-    tooltipBg,
-    tooltipBorderRadius,
-    zIndexPopup,
-    controlHeight,
-    boxShadowSecondary,
-    paddingSM,
-    paddingXS,
-    tooltipRadiusOuter,
-  } = token
-
-  return [
-    {
-      [componentCls]: {
-        ...resetComponent(token),
-        position: 'absolute',
-        zIndex: zIndexPopup,
-        display: 'block',
-        '&': [{ width: 'max-content' }, { width: 'intrinsic' }],
-        maxWidth: tooltipMaxWidth,
-        visibility: 'visible',
-        '&-hidden': {
-          display: 'none',
-        },
-
-        '--antd-arrow-background-color': tooltipBg,
-
-        // Wrapper for the tooltip content
-        [`${componentCls}-inner`]: {
-          minWidth: controlHeight,
-          minHeight: controlHeight,
-          padding: `${paddingSM / 2}px ${paddingXS}px`,
-          color: tooltipColor,
-          textAlign: 'start',
-          textDecoration: 'none',
-          wordWrap: 'break-word',
-          backgroundColor: tooltipBg,
-          borderRadius: tooltipBorderRadius,
-          boxShadow: boxShadowSecondary,
-        },
-
-        // Limit left and right placement radius
-        [[
-          `&-placement-left`,
-          `&-placement-leftTop`,
-          `&-placement-leftBottom`,
-          `&-placement-right`,
-          `&-placement-rightTop`,
-          `&-placement-rightBottom`,
-        ].join(',')]: {
-          [`${componentCls}-inner`]: {
-            borderRadius: Math.min(tooltipBorderRadius, MAX_VERTICAL_CONTENT_RADIUS),
-          },
-        },
-
-        [`${componentCls}-content`]: {
-          position: 'relative',
-        },
-
-        // generator for preset color
-        ...genPresetColor(token, (colorKey, { darkColor }) => ({
-          [`&${componentCls}-${colorKey}`]: {
-            [`${componentCls}-inner`]: {
-              backgroundColor: darkColor,
-            },
-            [`${componentCls}-arrow`]: {
-              '--antd-arrow-background-color': darkColor,
-            },
-          },
-        })),
-
-        // RTL
-        '&-rtl': {
-          direction: 'rtl',
-        },
-      },
-    },
-
-    // Arrow Style
-    getArrowStyle<TooltipToken>(
-      mergeToken<TooltipToken>(token, {
-        borderRadiusOuter: tooltipRadiusOuter,
-      }),
-      {
-        colorBg: 'var(--antd-arrow-background-color)',
-        showArrowCls: '',
-        contentRadius: tooltipBorderRadius,
-        limitVerticalRadius: true,
-      },
-    ),
-
-    // Pure Render
-    {
-      [`${componentCls}-pure`]: {
-        position: 'relative',
-        maxWidth: 'none',
-      },
-    },
-  ]
-}
-
-// ============================== Export ==============================
-export default (prefixCls: Ref<string>, injectStyle: Ref<boolean>): UseComponentStyleResult => {
-  const useOriginHook = genComponentStyleHook(
-    'Tooltip',
-    (token) => {
-      // Popover use Tooltip as internal component. We do not need to handle this.
-      if (injectStyle?.value === false) {
-        return []
-      }
-
-      const { borderRadius, colorTextLightSolid, colorBgDefault, borderRadiusOuter } = token
-
-      const TooltipToken = mergeToken<TooltipToken>(token, {
-        // default variables
-        tooltipMaxWidth: 250,
-        tooltipColor: colorTextLightSolid,
-        tooltipBorderRadius: borderRadius,
-        tooltipBg: colorBgDefault,
-        tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter,
-      })
-
-      return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')]
-    },
-    ({ zIndexPopupBase, colorBgSpotlight }) => ({
-      zIndexPopup: zIndexPopupBase + 70,
-      colorBgDefault: colorBgSpotlight,
-    }),
-  )
-
-  return useOriginHook(prefixCls)
-}