feat: tooltip (#7634)

web/app/components/datasets/create/embedding-process/index.tsx

@@ -22,7 +22,7 @@ import { Plan } from '@/app/components/billing/type'
 import { ZapFast } from '@/app/components/base/icons/src/vender/solid/general'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useProviderContext } from '@/context/provider-context'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import { sleep } from '@/utils'
 
 type Props = {
@@ -259,16 +259,18 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                 <div className={s.percent}>{`${getSourcePercent(indexingStatusDetail)}%`}</div>
               )}
               {indexingStatusDetail.indexing_status === 'error' && indexingStatusDetail.error && (
-                <TooltipPlus popupContent={(
-                  <div className='max-w-[400px]'>
-                    {indexingStatusDetail.error}
-                  </div>
-                )}>
+                <Tooltip
+                  popupContent={(
+                    <div className='max-w-[400px]'>
+                      {indexingStatusDetail.error}
+                    </div>
+                  )}
+                >
                   <div className={cn(s.percent, s.error, 'flex items-center')}>
                     Error
                     <RiErrorWarningFill className='ml-1 w-4 h-4' />
                   </div>
-                </TooltipPlus>
+                </Tooltip>
               )}
               {indexingStatusDetail.indexing_status === 'error' && !indexingStatusDetail.error && (
                 <div className={cn(s.percent, s.error, 'flex items-center')}>

web/app/components/datasets/create/step-two/index.tsx

@@ -7,7 +7,6 @@ import { XMarkIcon } from '@heroicons/react/20/solid'
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import {
   RiCloseLine,
-  RiQuestionLine,
 } from '@remixicon/react'
 import Link from 'next/link'
 import { groupBy } from 'lodash-es'
@@ -43,7 +42,6 @@ import { IS_CE_EDITION } from '@/config'
 import { RETRIEVE_METHOD } from '@/types/app'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Tooltip from '@/app/components/base/tooltip'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { LanguagesSupported } from '@/i18n/language'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -556,7 +554,7 @@ const StepTwo = ({
               className='border-[0.5px] !h-8 hover:outline hover:outline-[0.5px] hover:outline-gray-300 text-gray-700 font-medium bg-white shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]'
               onClick={setShowPreview}
             >
-              <Tooltip selector='data-preview-toggle'>
+              <Tooltip>
                 <div className="flex flex-row items-center">
                   <RocketLaunchIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />
                   <span className="text-[13px]">{t('datasetCreation.stepTwo.previewTitleButton')}</span>
@@ -628,13 +626,13 @@ const StepTwo = ({
                     <div className='w-full'>
                       <div className={s.label}>
                         {t('datasetCreation.stepTwo.overlap')}
-                        <TooltipPlus popupContent={
-                          <div className='max-w-[200px]'>
-                            {t('datasetCreation.stepTwo.overlapTip')}
-                          </div>
-                        }>
-                          <RiQuestionLine className='ml-1 w-3.5 h-3.5 text-gray-400' />
-                        </TooltipPlus>
+                        <Tooltip
+                          popupContent={
+                            <div className='max-w-[200px]'>
+                              {t('datasetCreation.stepTwo.overlapTip')}
+                            </div>
+                          }
+                        />
                       </div>
                       <input
                         type="number"

web/app/components/datasets/create/website/firecrawl/base/field.tsx

@@ -1,12 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
 import Input from './input'
 import cn from '@/utils/classnames'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
   className?: string
@@ -37,11 +34,12 @@ const Field: FC<Props> = ({
         <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-gray-900')}>{label} </div>
         {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
         {tooltip && (
-          <TooltipPlus popupContent={
-            <div className='w-[200px]'>{tooltip}</div>
-          }>
-            <RiQuestionLine className='relative top-[3px] w-3 h-3 ml-1 text-gray-500' />
-          </TooltipPlus>
+          <Tooltip
+            popupContent={
+              <div className='w-[200px]'>{tooltip}</div>
+            }
+            popupClassName='relative top-[3px] w-3 h-3 ml-1'
+          />
         )}
       </div>
       <Input