feat(tooltip): add showDelay/hideDelay props (#794)

components/tooltip/__tests__/tooltip-794.spec.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FTooltip from '../tooltip';
+
+describe('FTooltip showDelay/hideDelay', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+
+    it('showDelay delays the tooltip appearance', async () => {
+        const wrapper = mount(FTooltip, {
+            props: { modelValue: false, showDelay: 300 },
+            slots: { default: '<button>trigger</button>' },
+        });
+
+        const trigger = wrapper.find('button');
+        trigger.trigger('mouseenter');
+
+        vi.advanceTimersByTime(100);
+        await wrapper.vm.$nextTick();
+        expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+        vi.advanceTimersByTime(200);
+        await wrapper.vm.$nextTick();
+
+        const emitted = wrapper.emitted('update:modelValue');
+        expect(emitted).toBeDefined();
+        expect(emitted![0]).toEqual([true]);
+    });
+
+    it('hideDelay delays the tooltip disappearance', async () => {
+        const wrapper = mount(FTooltip, {
+            props: { modelValue: true, hideDelay: 200 },
+            slots: { default: '<button>trigger</button>' },
+        });
+
+        const trigger = wrapper.find('button');
+        trigger.trigger('mouseleave');
+
+        vi.advanceTimersByTime(100);
+        await wrapper.vm.$nextTick();
+        expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+        vi.advanceTimersByTime(200);
+        await wrapper.vm.$nextTick();
+
+        const emitted = wrapper.emitted('update:modelValue');
+        expect(emitted).toBeDefined();
+        expect(emitted![0]).toEqual([false]);
+    });
+});

components/tooltip/tooltip.tsx

@@ -30,6 +30,12 @@ const defaultConfirmOption = {
 
 export const toolTipProps = {
     ...popperProps,
+    showDelay: {
+        type: Number,
+    },
+    hideDelay: {
+        type: Number,
+    },
     title: [Number, String] as PropType<number | string>,
     content: [Number, String] as PropType<number | string>,
     mode: {
@@ -167,6 +173,8 @@ export default defineComponent({
             Object.keys(popperProps).forEach((key) => {
                 _props[key] = props[key as keyof typeof props];
             });
+            _props.showAfter = props.showDelay ?? 0;
+            _props.hideAfter = props.hideDelay ?? 0;
             if (props.mode === 'confirm') {
                 // confirm模式下，只能点击触发
                 _props.trigger = 'click';