feat: tooltip (#7634)

web/app/components/billing/pricing/plan-item.tsx

@@ -2,14 +2,11 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import { Plan } from '../type'
 import { ALL_PLANS, NUM_INFINITE, contactSalesUrl, contractSales, unAvailable } from '../config'
 import Toast from '../../base/toast'
-import TooltipPlus from '../../base/tooltip-plus'
+import Tooltip from '../../base/tooltip'
 import { PlanRange } from './select-plan-range'
 import cn from '@/utils/classnames'
 import { useAppContext } from '@/context/app-context'
@@ -30,13 +27,11 @@ const KeyValue = ({ label, value, tooltip }: { label: string; value: string | nu
       <div className='flex items-center text-gray-500 space-x-1'>
         <div>{label}</div>
         {tooltip && (
-          <TooltipPlus
+          <Tooltip
             popupContent={
               <div className='w-[200px]'>{tooltip}</div>
             }
-          >
-            <RiQuestionLine className='w-3 h-3 text-gray-400' />
-          </TooltipPlus>
+          />
         )}
       </div>
       <div className='mt-0.5 text-gray-900'>{value}</div>
@@ -136,25 +131,21 @@ const PlanItem: FC<Props> = ({
             <div className='mt-3.5 flex items-center space-x-1'>
               <span>+ </span>
               <div>{t('billing.plansCommon.supportItems.llmLoadingBalancing')}</div>
-              <TooltipPlus
+              <Tooltip
                 popupContent={
                   <div className='w-[200px]'>{t('billing.plansCommon.supportItems.llmLoadingBalancingTooltip')}</div>
                 }
-              >
-                <RiQuestionLine className='w-3 h-3 text-gray-400' />
-              </TooltipPlus>
+              />
             </div>
             <div className='mt-3.5 flex items-center space-x-1'>
               <div className='flex items-center'>
                 +
                 <div className='mr-0.5'>&nbsp;{t('billing.plansCommon.supportItems.ragAPIRequest')}</div>
-                <TooltipPlus
+                <Tooltip
                   popupContent={
                     <div className='w-[200px]'>{t('billing.plansCommon.ragAPIRequestTooltip')}</div>
                   }
-                >
-                  <RiQuestionLine className='w-3 h-3 text-gray-400' />
-                </TooltipPlus>
+                />
               </div>
               <div>{comingSoon}</div>
             </div>

web/app/components/billing/priority-label/index.tsx

@@ -9,7 +9,7 @@ import {
   ZapFast,
   ZapNarrow,
 } from '@/app/components/base/icons/src/vender/solid/general'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 const PriorityLabel = () => {
   const { t } = useTranslation()
@@ -27,7 +27,7 @@ const PriorityLabel = () => {
   }, [plan])
 
   return (
-    <TooltipPlus popupContent={
+    <Tooltip popupContent={
       <div>
         <div className='mb-1 text-xs font-semibold text-gray-700'>{`${t('billing.plansCommon.documentProcessingPriority')}: ${t(`billing.plansCommon.priority.${priority}`)}`}</div>
         {
@@ -53,7 +53,7 @@ const PriorityLabel = () => {
         }
         {t(`billing.plansCommon.priority.${priority}`)}
       </span>
-    </TooltipPlus>
+    </Tooltip>
   )
 }
 

web/app/components/billing/usage-info/index.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { InfoCircle } from '../../base/icons/src/vender/line/general'
 import ProgressBar from '../progress-bar'
 import { NUM_INFINITE } from '../config'
 import Tooltip from '@/app/components/base/tooltip'
@@ -48,11 +47,13 @@ const UsageInfo: FC<Props> = ({
           <Icon className='w-4 h-4 text-gray-700' />
           <div className='mx-1 leading-5 text-sm font-medium text-gray-700'>{name}</div>
           {tooltip && (
-            <Tooltip htmlContent={<div className='w-[180px]'>
-              {tooltip}
-            </div>} selector='config-var-tooltip'>
-              <InfoCircle className='w-[14px] h-[14px] text-gray-400' />
-            </Tooltip>
+            <Tooltip
+              popupContent={
+                <div className='w-[180px]'>
+                  {tooltip}
+                </div>
+              }
+            />
           )}
         </div>
         <div className='flex items-center leading-[18px] text-[13px] font-normal'>