feat(tooltip): append visible prop to control visible state manually

components/tooltip/tooltip-content.tsx

@@ -73,7 +73,6 @@ const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
 
   const preventHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation()
-    event.preventDefault()
     event.nativeEvent.stopImmediatePropagation()
   }
 

components/tooltip/tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import withDefaults from '../utils/with-defaults'
 import TooltipContent from './tooltip-content'
 import useClickAway from '../utils/use-click-away'
@@ -8,6 +8,7 @@ interface Props {
   text: string | React.ReactNode
   type?: SnippetTypes
   placement?: Placement
+  visible?: boolean
   initialVisible?: boolean
   hideArrow?: boolean
   trigger?: TriggerTypes
@@ -39,7 +40,7 @@ export type TooltipProps = Props & typeof defaultProps & NativeAttrs
 const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   children, initialVisible, text, offset, placement, portalClassName,
   enterDelay, leaveDelay, trigger, type, className, onVisibleChange,
-  hideArrow, ...props
+  hideArrow, visible: customVisible, ...props
 }) => {
   const timer = useRef<number>()
   const ref = useRef<HTMLDivElement>(null)
@@ -74,8 +75,14 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   
   const mouseEventHandler = (next: boolean) => trigger === 'hover' && changeVisible(next)
   const clickEventHandler = () => trigger === 'click' && changeVisible(!visible)
+  
   useClickAway(ref, () => trigger === 'click' && changeVisible(false))
   
+  useEffect(() => {
+    if (customVisible === undefined) return
+    changeVisible(customVisible)
+  }, [customVisible])
+  
   return (
     <div ref={ref} className={`tooltip ${className}`}
       onClick={clickEventHandler}

pages/en-us/components/tooltip.mdx

@@ -178,6 +178,7 @@ Displays additional information on hover.
 | Attribute | Description | Type | Accepted values | Default
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **text** | text of pop-up | `string` `React.ReactNode` | - | - |
+| **visible** | visible or not | `boolean` | - | `false` |
 | **initialVisible** | visible on initial | `boolean` | - | `false` |
 | **hideArrow** | hide arrow icon | `boolean` | - | `false` |
 | **type** | preset style type | [TooltipTypes](#tooltiptypes) | - | `default` |

pages/zh-cn/components/tooltip.mdx

@@ -178,6 +178,7 @@ export const meta = {
 | 属性 | 描述 | 类型 | 推荐值 | 默认
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **text** | 弹出框文字 | `string` `React.ReactNode` | - | - |
+| **visible** | 手动控制提示框的显示与隐藏 | `boolean` | - | `false` |
 | **initialVisible** | 初始是否可见 | `boolean` | - | `false` |
 | **hideArrow** | 隐藏箭头 | `boolean` | - | `false` |
 | **type** | 不同的文字提示类型 | [TooltipTypes](#tooltiptypes) | - | `default` |