feat: tooltip (#7634)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx

@@ -10,7 +10,7 @@ import { TracingProvider } from './type'
 import ProviderConfigModal from './provider-config-modal'
 import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 const I18N_PREFIX = 'app.tracing'
 
@@ -121,12 +121,11 @@ const ConfigPopup: FC<PopupProps> = ({
             <>
               {providerAllNotConfigured
                 ? (
-                  <TooltipPlus
+                  <Tooltip
                     popupContent={t(`${I18N_PREFIX}.disabledTip`)}
                   >
                     {switchContent}
-
-                  </TooltipPlus>
+                  </Tooltip>
                 )
                 : switchContent}
             </>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/toggle-fold-btn.tsx

@@ -3,7 +3,7 @@ import { ChevronDoubleDownIcon } from '@heroicons/react/20/solid'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import React, { useCallback } from 'react'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 const I18N_PREFIX = 'app.tracing'
 
@@ -25,9 +25,8 @@ const ToggleFoldBtn: FC<Props> = ({
   return (
     // text-[0px] to hide spacing between tooltip elements
     <div className='shrink-0 cursor-pointer text-[0px]' onClick={handleFoldChange}>
-      <TooltipPlus
+      <Tooltip
         popupContent={t(`${I18N_PREFIX}.${isFold ? 'expand' : 'collapse'}`)}
-        hideArrow
       >
         {isFold && (
           <div className='p-1 rounded-md text-gray-500 hover:text-gray-800 hover:bg-black/5'>
@@ -39,7 +38,7 @@ const ToggleFoldBtn: FC<Props> = ({
             <ChevronDoubleDownIcon className='w-4 h-4 transform rotate-180' />
           </div>
         )}
-      </TooltipPlus>
+      </Tooltip>
     </div>
   )
 }

web/app/(commonLayout)/datasets/DatasetCard.tsx

@@ -4,9 +4,7 @@ import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiMoreFill,
-} from '@remixicon/react'
+import { RiMoreFill } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
@@ -129,10 +127,9 @@ const DatasetCard = ({
               <div className={cn('truncate', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} title={dataset.name}>{dataset.name}</div>
               {!dataset.embedding_available && (
                 <Tooltip
-                  selector={`dataset-tag-${dataset.id}`}
-                  htmlContent={t('dataset.unavailableTip')}
+                  popupContent={t('dataset.unavailableTip')}
                 >
-                  <span className='shrink-0 inline-flex w-max ml-1 px-1 border boder-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
+                  <span className='shrink-0 inline-flex w-max ml-1 px-1 border border-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
                 </Tooltip>
               )}
             </div>