feat: tooltip (#7634)

web/app/components/develop/secret-key/input-copy.tsx

@@ -1,9 +1,8 @@
 'use client'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import copy from 'copy-to-clipboard'
 import { t } from 'i18next'
 import s from './style.module.css'
-import { randomString } from '@/utils'
 import Tooltip from '@/app/components/base/tooltip'
 
 type IInputCopyProps = {
@@ -21,8 +20,6 @@ const InputCopy = ({
 }: IInputCopyProps) => {
   const [isCopied, setIsCopied] = useState(false)
 
-  const selector = useRef(`input-tooltip-${randomString(4)}`)
-
   useEffect(() => {
     if (isCopied) {
       const timeout = setTimeout(() => {
@@ -40,22 +37,22 @@ const InputCopy = ({
       <div className="flex items-center flex-grow h-5">
         {children}
         <div className='flex-grow bg-gray-50 text-[13px] relative h-full'>
-          <Tooltip
-            selector={selector.current}
-            content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
-            className='z-10'
-          >
-            <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={() => {
-              copy(value)
-              setIsCopied(true)
-            }}>{value}</div>
-          </Tooltip>
+          <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={() => {
+            copy(value)
+            setIsCopied(true)
+          }}>
+            <Tooltip
+              popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
+              position='bottom'
+            >
+              {value}
+            </Tooltip>
+          </div>
         </div>
         <div className="flex-shrink-0 h-4 bg-gray-200 border" />
         <Tooltip
-          selector={selector.current}
-          content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
-          className='z-10'
+          popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
+          position='bottom'
         >
           <div className="px-0.5 flex-shrink-0">
             <div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {