feat: tooltip (#7634)

web/app/components/base/copy-feedback/index.tsx

@@ -3,19 +3,17 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { debounce } from 'lodash-es'
 import copy from 'copy-to-clipboard'
-import Tooltip from '../tooltip'
-import TooltipPlus from '../tooltip-plus'
 import copyStyle from './style.module.css'
+import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
   content: string
-  selectorId: string
   className?: string
 }
 
 const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
 
-const CopyFeedback = ({ content, selectorId, className }: Props) => {
+const CopyFeedback = ({ content, className }: Props) => {
   const { t } = useTranslation()
   const [isCopied, setIsCopied] = useState<boolean>(false)
 
@@ -30,8 +28,7 @@ const CopyFeedback = ({ content, selectorId, className }: Props) => {
 
   return (
     <Tooltip
-      selector={`common-copy-feedback-${selectorId}`}
-      content={
+      popupContent={
         (isCopied
           ? t(`${prefixEmbedded}.copied`)
           : t(`${prefixEmbedded}.copy`)) || ''
@@ -41,10 +38,10 @@ const CopyFeedback = ({ content, selectorId, className }: Props) => {
         className={`w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg ${
           className ?? ''
         }`}
-        onMouseLeave={onMouseLeave}
       >
         <div
           onClick={onClickCopy}
+          onMouseLeave={onMouseLeave}
           className={`w-full h-full ${copyStyle.copyIcon} ${
             isCopied ? copyStyle.copied : ''
           }`}
@@ -70,7 +67,7 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
   }, 100)
 
   return (
-    <TooltipPlus
+    <Tooltip
       popupContent={
         (isCopied
           ? t(`${prefixEmbedded}.copied`)
@@ -81,15 +78,15 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
         className={`w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg ${
           className ?? ''
         }`}
-        onMouseLeave={onMouseLeave}
       >
         <div
           onClick={onClickCopy}
+          onMouseLeave={onMouseLeave}
           className={`w-full h-full ${copyStyle.copyIcon} ${
             isCopied ? copyStyle.copied : ''
           }`}
         ></div>
       </div>
-    </TooltipPlus>
+    </Tooltip>
   )
 }