diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index b4840a2eff..d969e0bf83 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -2218,11 +2218,6 @@
       "count": 3
     }
   },
-  "web/app/components/billing/usage-info/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/common/image-previewer/index.tsx": {
     "no-irregular-whitespace": {
       "count": 1
diff --git a/web/app/components/billing/usage-info/__tests__/index.spec.tsx b/web/app/components/billing/usage-info/__tests__/index.spec.tsx
index 073c2e7fe2..3322d35809 100644
--- a/web/app/components/billing/usage-info/__tests__/index.spec.tsx
+++ b/web/app/components/billing/usage-info/__tests__/index.spec.tsx
@@ -309,7 +309,7 @@ describe('UsageInfo', () => {
           />,
         )
 
-        expect(container.querySelector('[data-state]')).toBeInTheDocument()
+        expect(container.querySelectorAll('.cursor-default').length).toBeGreaterThan(0)
       })
     })
   })
diff --git a/web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx b/web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx
index 43e132c00f..3422d09c2f 100644
--- a/web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx
+++ b/web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx
@@ -3,7 +3,8 @@ import { defaultPlan } from '../../config'
 import { Plan } from '../../type'
 import VectorSpaceInfo from '../vector-space-info'
 
-const queryPlaceholder = () => document.body.querySelector('[aria-hidden="true"]')
+const queryPlaceholder = () =>
+  document.body.querySelector('[aria-hidden="true"].bg-components-progress-bar-bg')
 
 // Mock provider context with configurable plan
 let mockPlanType = Plan.sandbox
diff --git a/web/app/components/billing/usage-info/index.tsx b/web/app/components/billing/usage-info/index.tsx
index 68e889f320..ee1929863f 100644
--- a/web/app/components/billing/usage-info/index.tsx
+++ b/web/app/components/billing/usage-info/index.tsx
@@ -3,9 +3,10 @@ import type { MeterTone } from '@langgenius/dify-ui/meter'
 import type { ComponentType, FC, ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import { MeterIndicator, MeterRoot, MeterTrack } from '@langgenius/dify-ui/meter'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@/app/components/base/tooltip'
+import { Infotip } from '@/app/components/base/infotip'
 import { NUM_INFINITE } from '../config'
 
 type Props = {
@@ -159,11 +160,11 @@ const UsageInfo: FC<Props> = ({
   const wrapWithStorageTooltip = (children: ReactNode) => {
     if (storageMode && storageTooltip) {
       return (
-        <Tooltip
-          popupContent={<div className="w-[200px]">{storageTooltip}</div>}
-          asChild={false}
-        >
-          <div className="cursor-default">{children}</div>
+        <Tooltip>
+          <TooltipTrigger render={<div className="cursor-default">{children}</div>} />
+          <TooltipContent className="w-[200px] max-w-[200px]">
+            {storageTooltip}
+          </TooltipContent>
         </Tooltip>
       )
     }
@@ -178,13 +179,9 @@ const UsageInfo: FC<Props> = ({
       <div className="flex items-center gap-1">
         <div className="system-xs-medium text-text-tertiary">{name}</div>
         {tooltip && (
-          <Tooltip
-            popupContent={(
-              <div className="w-[180px]">
-                {tooltip}
-              </div>
-            )}
-          />
+          <Infotip aria-label={tooltip} popupClassName="w-[180px] max-w-[180px]">
+            {tooltip}
+          </Infotip>
         )}
       </div>
       <div className="flex items-center gap-1 system-md-semibold text-text-primary">