refactor: migrate all antd Tooltip components to HeroUI Tooltip (#10295)

* refactor: migrate tooltip components to @cherrystudio/ui

- Replace all antd Tooltip + InfoCircleOutlined patterns with InfoTooltip component
- Replace all antd Tooltip + QuestionCircleOutlined patterns with HelpTooltip component
- Migrate all WarnTooltip imports to @cherrystudio/ui
- Add onClick support to InfoTooltip and HelpTooltip components
- Remove local tooltip components from renderer
- Update eslint config to restrict antd Tooltip imports
- Clean up unused imports and styled components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: replace tooltip

* fix: yarn format

* fix: type check

* Update QuickModelPopup.tsx

* fix: yarn test

* fix: ci error

* Update TabContainer.tsx

* fix: ci error

* fix: ci error

* fix: issue

* fix: ci

* fix: again

* refactor(ui): replace Tooltip title prop with content for consistency

* refactor(Tooltip): improve Tooltip component by extending props and simplifying implementation

- Extend TooltipProps from HeroUITooltipProps instead of redefining
- Remove redundant props and use spread operator for classNames
- Export TooltipProps type for better type support

* refactor(HelpTooltip): rename title prop to content and simplify component

Update HelpTooltip component to use TooltipProps interface and rename title prop to content for consistency
Update all instances where HelpTooltip is used to reflect the prop name change

* refactor(IconTooltips): consolidate tooltip components into unified module

Move HelpTooltip, InfoTooltip, and WarnTooltip into a single IconTooltips directory with shared types
Update exports in components index to use new module structure

* refactor(tooltip): update InfoTooltip prop from title to content and simplify component

Consolidate tooltip props interface and update all instances to use content prop instead of title for consistency. Remove redundant interface definitions and simplify InfoTooltip component implementation.

* refactor(ui): rename WarnTooltip prop from title to content for consistency

Update all instances of WarnTooltip component to use content prop instead of title for better consistency with Tooltip component interface. Also simplify the component props by extending IconTooltipProps type.

* fix(tooltip): update tooltip usage

- Replace deprecated props like `mouseEnterDelay` and `mouseLeaveDelay` with `delay` and `closeDelay`
- Rename `arrow` prop to `showArrow` for better semantics
- Update styling props to use `classNames` instead of inline styles
- Remove unnecessary props like `fresh` and `destroyOnHidden`

* refactor(components): remove redundant placement="top" from Tooltip components

The placement="top" prop was removed from all Tooltip components since it's the default value and redundant. This change improves code cleanliness without affecting functionality.

* fix(HeaderNavbar): add tooltip placement for sidebar toggle buttons

* fix(ui): add delay to tooltip components for better user experience

* refactor(tooltip): adjust tooltip behavior and styling across components

- Remove default delay values from base Tooltip component
- Add delay and closeDelay props to specific tooltip instances
- Fix tooltip compatibility issue with Antd Dropdown
- Adjust tooltip placement and styling in various components

* fix(ui): set closeDelay to 0 for Tooltip components to improve responsiveness

Prevent tooltip delay from causing poor user experience by making them close immediately when mouse leaves the element

* refactor(ui): remove redundant tooltip placement prop

The 'placement="top"' prop was removed from Tooltip components as it's the default value and doesn't need to be explicitly set.

* fix(ui): adjust tooltip delays for better user experience

- Set consistent default delay of 1000ms for window controls
- Increase delay for sidebar toggle tooltips to 2000ms
- Adjust various message action tooltip delays between 600-1200ms

* fix(SelectModelPopup): add delay props to provider settings tooltip

Add delay and closeDelay props to Tooltip component to improve user experience by preventing accidental triggers

* style(HelpTooltip): add cursor help style to improve UX

* fix(components): add tooltip delay and placement props for better UX

Add delay prop to CustomTag and ModelIdWithTags tooltips to prevent flickering
Set placement prop for LocalBackupManager tooltip to top-start
Add closeDelay prop to HelpTooltip in SaveToKnowledgePopup for immediate closing

* refactor(ModelSelectButton): simplify tooltip props by using TooltipProps type

Replace individual tooltip placement props with TooltipProps type from ui library for better maintainability

* fix(ui): remove tooltip close delay for better user experience

* docs(tooltip): add jsdoc comments explaining tooltip wrapper behavior

* refactor(Tooltip): clarify showArrow prop

* fix(Inputbar): set closeDelay to 0 for pause tooltip to improve UX

Prevent tooltip from staying visible after interaction by removing the close delay

* style(InputbarTools): improve tooltip consistency and css formatting

- Add closeDelay to new topic tooltip for consistency
- Remove redundant line breaks in tooltip props
- Format css transition properties for better readability

* chore: add tailwindCSS class attributes to vscode settings

* fix(tooltips): improve tooltip behavior and styling across components

- Add closeDelay=0 to most tooltips for instant closing
- Add custom styling to CitationTooltip and ChatFlowHistory tooltips
- Adjust delay times for navigation tooltips
- Remove conflicting Tooltip wrappers around Popconfirm actions

* refactor(ui): adjust tooltip delays and placements across components

- Remove redundant isOpen prop from CustomNode tooltip
- Standardize tooltip delays and placements in MessageGroupMenuBar, MessageTokens, ChatNavbar
- Simplify tooltip wrapper structure in HeaderNavbar
- Add consistent tooltip delays in MessageGroupModelList
- Set tooltip placements in MinimalToolbar

* refactor(Tooltip): enhance tooltip structure and props

- Add className prop to Tooltip component for better customization
- Wrap children in a div with relative positioning to improve layout

* refactor(Tooltip): enhance props structure for improved customization

- Update Tooltip component to allow optional classNames with a placeholder property
- Modify child wrapper to utilize classNames for better styling control

* refactor(IconTooltips): consolidate icon props into single iconProps object

Replace individual icon styling props (iconColor, iconSize, iconStyle) with a unified iconProps object using LucideProps type. This simplifies the component API and improves maintainability by using a standardized props structure across all icon tooltip components.

* feat(JoplinSettings): add help button to open Joplin documentation

Add a help button in Joplin settings that opens the official Joplin documentation in a minapp popup when clicked. This provides users with quick access to Joplin's help resources.

* feat(NotionSettings): add help link click handler for notion title

Add click handler to open help documentation when clicking on Notion title in settings

* feat(S3Settings): add help link to S3 settings title

Add click handler to open documentation for S3 settings when title is clicked

* feat(settings): add help button for siyuan integration

Add click handler to open help documentation for siyuan integration settings

* feat(yuque-settings): add help button to open yuque token guide

Add a help button in Yuque settings that opens a minapp popup with Yuque's token guide. This helps users easily access documentation for generating API tokens.

* fix(ui): adjust tooltip delay settings for better user experience

Set closeDelay to 0 for reset button tooltip to prevent lingering
Add delay of 500ms for api key list tooltip to avoid accidental triggers

* fix(ModelList): set closeDelay to 0 for all Tooltip components

Prevent tooltips from staying open longer than necessary by immediately closing them on mouse leave

* fix(ui): improve tooltip placement and delay settings

adjust tooltip placement and delay for better user experience

* refactor(tests): update tooltip mock implementation and snapshots

- Consolidate tooltip mock to handle both title and content props
- Remove deprecated placement attributes from snapshots
- Clean up test tooltip content assertions

* refactor: remove unnecessary whitespace and simplify tooltip components

clean up code by removing redundant whitespace and simplifying tooltip component usage across multiple files

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: icarus <eurfelux@gmail.com>
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>

.vscode/settings.json

@@ -48,5 +48,9 @@
   "search.exclude": {
     "**/dist/**": true,
     ".yarn/releases/**": true
-  }
+  },
+  "tailwindCSS.classAttributes": [
+    "className",
+    "classNames",
+  ]
 }

eslint.config.mjs

@@ -145,7 +145,7 @@ export default defineConfig([
           paths: [
             {
               name: 'antd',
-              importNames: ['Flex', 'Switch', 'message', 'Button'],
+              importNames: ['Flex', 'Switch', 'message', 'Button', 'Tooltip'],
               message:
                 '❌ Do not import this component from antd. Use our custom components instead: import { ... } from "@cherrystudio/ui"'
             },

packages/ui/package.json

@@ -69,7 +69,7 @@
     "react-dom": "^19.0.0",
     "storybook": "^9.1.6",
     "styled-components": "^6.1.15",
-    "tsdown": "^0.12.9",
+    "tsdown": "^0.15.5",
     "tsx": "^4.20.5",
     "typescript": "^5.6.2",
     "vitest": "^3.2.4"

packages/ui/src/components/base/Avatar/EmojiAvatar.tsx

@@ -10,14 +10,7 @@ interface EmojiAvatarProps {
   style?: React.CSSProperties
 }
 
-const EmojiAvatar = ({
+const EmojiAvatar = ({ children, size = 31, fontSize, onClick, className, style }: EmojiAvatarProps) => (
-  children,
-  size = 31,
-  fontSize,
-  onClick,
-  className,
-  style
-}: EmojiAvatarProps) => (
   <div
     onClick={onClick}
     className={cn(

packages/ui/src/components/base/CustomTag/index.tsx

@@ -76,7 +76,7 @@ const CustomTag: FC<CustomTagProps> = ({
   )
 
   return tooltip ? (
-    <Tooltip content={tooltip} placement="top" delay={300}>
+    <Tooltip content={tooltip} delay={300}>
       {tagContent}
     </Tooltip>
   ) : (

packages/ui/src/components/base/Tooltip/index.tsx

@@ -0,0 +1,34 @@
+import type { TooltipProps as HeroUITooltipProps } from '@heroui/react'
+import { cn, Tooltip as HeroUITooltip } from '@heroui/react'
+
+export interface TooltipProps extends HeroUITooltipProps {}
+
+/**
+ * Tooltip wrapper that applies consistent styling and arrow display.
+ * Differences from raw HeroUI Tooltip:
+ * 1. Defaults showArrow={true}
+ * 2. Merges a default max-w-60 class into the content slot, capping width at 240px.
+ * All other HeroUI Tooltip props/behaviors remain unchanged.
+ *
+ * @see https://www.heroui.com/docs/components/tooltip
+ */
+export const Tooltip = ({
+  children,
+  classNames,
+  showArrow,
+  ...rest
+}: Omit<TooltipProps, 'classNames'> & {
+  classNames?: TooltipProps['classNames'] & { placeholder?: string }
+}) => {
+  return (
+    <HeroUITooltip
+      classNames={{
+        ...classNames,
+        content: cn('max-w-60', classNames?.content)
+      }}
+      showArrow={showArrow ?? true}
+      {...rest}>
+      <div className={cn('relative z-10', classNames?.placeholder)}>{children}</div>
+    </HeroUITooltip>
+  )
+}

packages/ui/src/components/display/ListItem/index.tsx

@@ -43,7 +43,7 @@ const ListItem = ({
       <div className="flex items-center gap-0.5 overflow-hidden text-xs">
         {icon && <span className="flex items-center justify-center mr-2">{icon}</span>}
         <div className="flex-1 flex flex-col overflow-hidden">
-          <Tooltip content={title} placement="top">
+          <Tooltip content={title}>
             <div className="truncate text-gray-900 dark:text-gray-100" style={titleStyle}>
               {title}
             </div>

packages/ui/src/components/icons/ToolsCallingIcon/index.tsx

@@ -14,7 +14,7 @@ interface ToolsCallingIconProps extends React.HTMLAttributes<HTMLDivElement> {
 const ToolsCallingIcon = ({ className, iconClassName, TooltipProps, ...props }: ToolsCallingIconProps) => {
   return (
     <div className={cn('flex justify-center items-center', className)} {...props}>
-      <Tooltip placement="top" {...TooltipProps}>
+      <Tooltip {...TooltipProps}>
         <Wrench className={cn('w-4 h-4 mr-1.5 text-[#00b96b]', iconClassName)} />
       </Tooltip>
     </div>

packages/ui/src/components/index.ts

@@ -15,6 +15,7 @@ export { ErrorTag, InfoTag, StatusTag, SuccessTag, WarnTag } from './base/Status
 export { DescriptionSwitch, Switch } from './base/Switch'
 export { default as TextBadge } from './base/TextBadge'
 export { getToastUtilities, type ToastUtilities } from './base/Toast'
+export { Tooltip, type TooltipProps } from './base/Tooltip'
 
 // Display Components
 export { default as Ellipsis } from './display/Ellipsis'
@@ -80,15 +81,12 @@ export { DraggableList, useDraggableReorder } from './interactive/DraggableList'
 export type { EditableNumberProps } from './interactive/EditableNumber'
 // EditableNumber
 export { default as EditableNumber } from './interactive/EditableNumber'
-export { default as HelpTooltip } from './interactive/HelpTooltip'
+// Tooltip variants
+export { HelpTooltip, type IconTooltipProps, InfoTooltip, WarnTooltip } from './interactive/IconTooltips'
 // ImageToolButton
 export { default as ImageToolButton } from './interactive/ImageToolButton'
-// InfoTooltip
-export { default as InfoTooltip } from './interactive/InfoTooltip'
 // Sortable
 export { Sortable } from './interactive/Sortable'
-// WarnTooltip
-export { default as WarnTooltip } from './interactive/WarnTooltip'
 
 // Composite Components (复合组件)
 // 暂无复合组件

packages/ui/src/components/interactive/CollapsibleSearchBar/index.tsx

@@ -1,10 +1,12 @@
 // Original path: src/renderer/src/components/CollapsibleSearchBar.tsx
 import type { InputRef } from 'antd'
-import { Input, Tooltip } from 'antd'
+import { Input } from 'antd'
 import { Search } from 'lucide-react'
 import { motion } from 'motion/react'
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
 
+import { Tooltip } from '../../base/Tooltip'
+
 interface CollapsibleSearchBarProps {
   onSearch: (text: string) => void
   placeholder?: string
@@ -93,7 +95,7 @@ const CollapsibleSearchBar = ({
         }}
         style={{ cursor: 'pointer', display: 'flex' }}
         onClick={() => setSearchVisible(true)}>
-        <Tooltip title={tooltip} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
+        <Tooltip content={tooltip} delay={500} closeDelay={0}>
           {icon}
         </Tooltip>
       </motion.div>

packages/ui/src/components/interactive/DraggableList/virtual-list.tsx

@@ -1,4 +1,3 @@
-import { Scrollbar } from '@cherrystudio/ui'
 import type {
   DroppableProps,
   DropResult,
@@ -10,6 +9,7 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
 import { type ScrollToOptions, useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'
 import { type Key, memo, useCallback, useImperativeHandle, useRef } from 'react'
 
+import Scrollbar from '../../layout/Scrollbar'
 import { droppableReorder } from './sort'
 
 export interface DraggableVirtualListRef {

packages/ui/src/components/interactive/HelpTooltip/index.tsx

@@ -1,22 +0,0 @@
-// Original path: src/renderer/src/components/TooltipIcons/HelpTooltip.tsx
-import type { TooltipProps } from 'antd'
-import { Tooltip } from 'antd'
-import { HelpCircle } from 'lucide-react'
-
-type InheritedTooltipProps = Omit<TooltipProps, 'children'>
-
-interface HelpTooltipProps extends InheritedTooltipProps {
-  iconColor?: string
-  iconSize?: string | number
-  iconStyle?: React.CSSProperties
-}
-
-const HelpTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: HelpTooltipProps) => {
-  return (
-    <Tooltip {...rest}>
-      <HelpCircle size={iconSize} color={iconColor} style={{ ...iconStyle }} role="img" aria-label="Help" />
-    </Tooltip>
-  )
-}
-
-export default HelpTooltip

packages/ui/src/components/interactive/IconTooltips/HelpTooltip.tsx

@@ -0,0 +1,19 @@
+// Original path: src/renderer/src/components/TooltipIcons/HelpTooltip.tsx
+import { HelpCircle } from 'lucide-react'
+
+import { Tooltip } from '../../base/Tooltip'
+import type { IconTooltipProps } from './types'
+
+export const HelpTooltip = ({ iconProps, ...rest }: IconTooltipProps) => {
+  return (
+    <Tooltip {...rest}>
+      <HelpCircle
+        size={iconProps?.size ?? 14}
+        color={iconProps?.color ?? 'var(--color-text-2)'}
+        role="img"
+        aria-label="Help"
+        {...iconProps}
+      />
+    </Tooltip>
+  )
+}

packages/ui/src/components/interactive/IconTooltips/InfoTooltip.tsx

@@ -0,0 +1,19 @@
+// Original: src/renderer/src/components/TooltipIcons/InfoTooltip.tsx
+import { Info } from 'lucide-react'
+
+import { Tooltip } from '../../base/Tooltip'
+import type { IconTooltipProps } from './types'
+
+export const InfoTooltip = ({ iconProps, ...rest }: IconTooltipProps) => {
+  return (
+    <Tooltip {...rest}>
+      <Info
+        size={iconProps?.size ?? 14}
+        color={iconProps?.color ?? 'var(--color-text-2)'}
+        role="img"
+        aria-label="Information"
+        {...iconProps}
+      />
+    </Tooltip>
+  )
+}

packages/ui/src/components/interactive/IconTooltips/WarnTooltip.tsx

@@ -0,0 +1,19 @@
+// Original path: src/renderer/src/components/TooltipIcons/WarnTooltip.tsx
+import { AlertTriangle } from 'lucide-react'
+
+import { Tooltip } from '../../base/Tooltip'
+import type { IconTooltipProps } from './types'
+
+export const WarnTooltip = ({ iconProps, ...rest }: IconTooltipProps) => {
+  return (
+    <Tooltip {...rest}>
+      <AlertTriangle
+        size={iconProps?.size ?? 14}
+        color={iconProps?.color ?? 'var(--color-status-warning)'}
+        role="img"
+        aria-label="Warning"
+        {...iconProps}
+      />
+    </Tooltip>
+  )
+}

packages/ui/src/components/interactive/IconTooltips/index.tsx

@@ -0,0 +1,4 @@
+export { HelpTooltip } from './HelpTooltip'
+export { InfoTooltip } from './InfoTooltip'
+export type { IconTooltipProps } from './types'
+export { WarnTooltip } from './WarnTooltip'

packages/ui/src/components/interactive/IconTooltips/types.ts

@@ -0,0 +1,7 @@
+import type { LucideProps } from 'lucide-react'
+
+import type { TooltipProps } from '../../base/Tooltip'
+
+export interface IconTooltipProps extends TooltipProps {
+  iconProps?: LucideProps
+}

packages/ui/src/components/interactive/ImageToolButton/index.tsx

@@ -1,8 +1,9 @@
 // Original path: src/renderer/src/components/Preview/ImageToolButton.tsx
-import { Button } from '@cherrystudio/ui'
-import { Tooltip } from 'antd'
 import { memo } from 'react'
 
+import Button from '../../base/Button'
+import { Tooltip } from '../../base/Tooltip'
+
 interface ImageToolButtonProps {
   tooltip: string
   icon: React.ReactNode
@@ -11,7 +12,7 @@ interface ImageToolButtonProps {
 
 const ImageToolButton = ({ tooltip, icon, onPress }: ImageToolButtonProps) => {
   return (
-    <Tooltip title={tooltip} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
+    <Tooltip content={tooltip} delay={500} closeDelay={0}>
       <Button radius="full" isIconOnly onPress={onPress} aria-label={tooltip}>
         {icon}
       </Button>

packages/ui/src/components/interactive/InfoTooltip/index.tsx

@@ -1,22 +0,0 @@
-// Original: src/renderer/src/components/TooltipIcons/InfoTooltip.tsx
-import type { TooltipProps } from 'antd'
-import { Tooltip } from 'antd'
-import { Info } from 'lucide-react'
-
-type InheritedTooltipProps = Omit<TooltipProps, 'children'>
-
-interface InfoTooltipProps extends InheritedTooltipProps {
-  iconColor?: string
-  iconSize?: string | number
-  iconStyle?: React.CSSProperties
-}
-
-const InfoTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: InfoTooltipProps) => {
-  return (
-    <Tooltip {...rest}>
-      <Info size={iconSize} color={iconColor} style={{ ...iconStyle }} role="img" aria-label="Information" />
-    </Tooltip>
-  )
-}
-
-export default InfoTooltip

packages/ui/src/components/interactive/WarnTooltip/index.tsx

@@ -1,27 +0,0 @@
-// Original path: src/renderer/src/components/TooltipIcons/WarnTooltip.tsx
-import type { TooltipProps } from 'antd'
-import { Tooltip } from 'antd'
-import { AlertTriangle } from 'lucide-react'
-
-type InheritedTooltipProps = Omit<TooltipProps, 'children'>
-
-interface WarnTooltipProps extends InheritedTooltipProps {
-  iconColor?: string
-  iconSize?: string | number
-  iconStyle?: React.CSSProperties
-}
-
-const WarnTooltip = ({
-  iconColor = 'var(--color-status-warning)',
-  iconSize = 14,
-  iconStyle,
-  ...rest
-}: WarnTooltipProps) => {
-  return (
-    <Tooltip {...rest}>
-      <AlertTriangle size={iconSize} color={iconColor} style={{ ...iconStyle }} role="img" aria-label="Information" />
-    </Tooltip>
-  )
-}
-
-export default WarnTooltip

src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx

@@ -1,5 +1,5 @@
 import { CodeEditor, type CodeEditorHandles } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { CopyIcon, FilePngIcon } from '@renderer/components/Icons'
 import { isMac } from '@renderer/config/constant'
@@ -8,7 +8,7 @@ import { useTemporaryValue } from '@renderer/hooks/useTemporaryValue'
 import { classNames } from '@renderer/utils'
 import { extractHtmlTitle, getFileNameFromHtmlTitle } from '@renderer/utils/formats'
 import { captureScrollableIframeAsBlob, captureScrollableIframeAsDataURL } from '@renderer/utils/image'
-import { Dropdown, Modal, Splitter, Tooltip, Typography } from 'antd'
+import { Dropdown, Modal, Splitter, Typography } from 'antd'
 import { Camera, Check, Code, Eye, Maximize2, Minimize2, SaveIcon, SquareSplitHorizontal, X } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -126,7 +126,7 @@ const HtmlArtifactsPopup: React.FC<HtmlArtifactsPopupProps> = ({ open, title, ht
               }
             ]
           }}>
-          <Tooltip title={t('html_artifacts.capture.label')} mouseLeaveDelay={0}>
+          <Tooltip content={t('html_artifacts.capture.label')} closeDelay={0}>
             <Button variant="light" startContent={<Camera size={16} />} isIconOnly className="nodrag" />
           </Tooltip>
         </Dropdown>
@@ -164,7 +164,7 @@ const HtmlArtifactsPopup: React.FC<HtmlArtifactsPopupProps> = ({ open, title, ht
           }}
         />
         <ToolbarWrapper>
-          <Tooltip title={t('code_block.edit.save.label')} mouseLeaveDelay={0}>
+          <Tooltip content={t('code_block.edit.save.label')} closeDelay={0}>
             <ToolbarButton radius="full" size="lg" isIconOnly onPress={handleSave}>
               {saved ? (
                 <Check size={16} color="var(--color-status-success)" />

src/renderer/src/components/CodeToolbar/__tests__/CodeToolButton.test.tsx

@@ -6,8 +6,8 @@ import CodeToolButton from '../button'
 
 // Mock Antd components
 const mocks = vi.hoisted(() => ({
-  Tooltip: vi.fn(({ children, title }) => (
+  Tooltip: vi.fn(({ children, title, content }) => (
-    <div data-testid="tooltip" data-title={title}>
+    <div data-testid="tooltip" data-title={content || title}>
       {children}
     </div>
   )),
@@ -19,10 +19,13 @@ const mocks = vi.hoisted(() => ({
 }))
 
 vi.mock('antd', () => ({
-  Tooltip: mocks.Tooltip,
   Dropdown: mocks.Dropdown
 }))
 
+vi.mock('@cherrystudio/ui', () => ({
+  Tooltip: mocks.Tooltip
+}))
+
 // Mock ToolWrapper
 vi.mock('../styles', () => ({
   ToolWrapper: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (

src/renderer/src/components/CodeToolbar/__tests__/CodeToolbar.test.tsx

@@ -14,8 +14,8 @@ const mocks = vi.hoisted(() => ({
       {tool.icon}
     </div>
   )),
-  Tooltip: vi.fn(({ children, title }) => (
+  Tooltip: vi.fn(({ children, title, content }) => (
-    <div data-testid="tooltip" data-title={title}>
+    <div data-testid="tooltip" data-title={content || title}>
       {children}
     </div>
   )),
@@ -39,11 +39,8 @@ vi.mock('../button', () => ({
   default: mocks.CodeToolButton
 }))
 
-vi.mock('antd', () => ({
-  Tooltip: mocks.Tooltip
-}))
-
 vi.mock('@cherrystudio/ui', () => ({
+  Tooltip: mocks.Tooltip,
   RowFlex: mocks.RowFlex
 }))
 

src/renderer/src/components/CodeToolbar/button.tsx

@@ -1,5 +1,6 @@
+import { Tooltip } from '@cherrystudio/ui'
 import type { ActionTool } from '@renderer/components/ActionTools'
-import { Dropdown, Tooltip } from 'antd'
+import { Dropdown } from 'antd'
 import { memo, useMemo } from 'react'
 
 import { ToolWrapper } from './styles'
@@ -11,7 +12,7 @@ interface CodeToolButtonProps {
 const CodeToolButton = ({ tool }: CodeToolButtonProps) => {
   const mainTool = useMemo(
     () => (
-      <Tooltip key={tool.id} title={tool.tooltip} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
+      <Tooltip key={tool.id} content={tool.tooltip} delay={500} closeDelay={0}>
         <ToolWrapper onClick={tool.onClick}>{tool.icon}</ToolWrapper>
       </Tooltip>
     ),

src/renderer/src/components/CodeToolbar/toolbar.tsx

@@ -1,6 +1,6 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Tooltip } from '@cherrystudio/ui'
 import type { ActionTool } from '@renderer/components/ActionTools'
-import { Tooltip } from 'antd'
 import { EllipsisVertical } from 'lucide-react'
 import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -39,7 +39,7 @@ const CodeToolbar = ({ tools }: { tools: ActionTool[] }) => {
         {/* 有多个快捷工具时通过 more 按钮展示 */}
         {quickToolButtons}
         {quickTools.length > 1 && (
-          <Tooltip title={t('code_block.more')} mouseEnterDelay={0.5}>
+          <Tooltip content={t('code_block.more')} delay={500}>
             <ToolWrapper onClick={() => setShowQuickTools(!showQuickTools)} className={showQuickTools ? 'active' : ''}>
               <EllipsisVertical className="tool-icon" />
             </ToolWrapper>

src/renderer/src/components/CollapsibleSearchBar.tsx

@@ -1,6 +1,7 @@
+import { Tooltip } from '@cherrystudio/ui'
 import i18n from '@renderer/i18n'
 import type { InputRef } from 'antd'
-import { Input, Tooltip } from 'antd'
+import { Input } from 'antd'
 import { Search } from 'lucide-react'
 import { motion } from 'motion/react'
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
@@ -93,7 +94,7 @@ const CollapsibleSearchBar = ({
         }}
         style={{ cursor: 'pointer', display: 'flex' }}
         onClick={() => setSearchVisible(true)}>
-        <Tooltip title={tooltip} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
+        <Tooltip content={tooltip} delay={500} closeDelay={0}>
           {icon}
         </Tooltip>
       </motion.div>

src/renderer/src/components/ContentSearch.tsx

@@ -1,6 +1,6 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import NarrowLayout from '@renderer/pages/home/Messages/NarrowLayout'
-import { Tooltip } from 'antd'
 import { debounce } from 'lodash'
 import { CaseSensitive, ChevronDown, ChevronUp, User, WholeWord, X } from 'lucide-react'
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
@@ -363,17 +363,17 @@ export const ContentSearch = React.forwardRef<ContentSearchRef, Props>(
               />
               <ToolBar>
                 {showUserToggle && (
-                  <Tooltip title={t('button.includes_user_questions')} mouseEnterDelay={0.8} placement="bottom">
+                  <Tooltip placement="bottom" content={t('button.includes_user_questions')} delay={800}>
                     <ActionIconButton
                       onPress={userOutlinedButtonOnClick}
                       isIconOnly
                       icon={
                         <User size={18} style={{ color: includeUser ? 'var(--color-link)' : 'var(--color-icon)' }} />
                       }
-                    />
+                    />{' '}
                   </Tooltip>
                 )}
-                <Tooltip title={t('button.case_sensitive')} mouseEnterDelay={0.8} placement="bottom">
+                <Tooltip placement="bottom" content={t('button.case_sensitive')} delay={800}>
                   <ActionIconButton
                     onPress={caseSensitiveButtonOnClick}
                     icon={
@@ -382,9 +382,9 @@ export const ContentSearch = React.forwardRef<ContentSearchRef, Props>(
                         style={{ color: isCaseSensitive ? 'var(--color-link)' : 'var(--color-icon)' }}
                       />
                     }
-                  />
+                  />{' '}
                 </Tooltip>
-                <Tooltip title={t('button.whole_word')} mouseEnterDelay={0.8} placement="bottom">
+                <Tooltip placement="bottom" content={t('button.whole_word')} delay={800}>
                   <ActionIconButton
                     onPress={wholeWordButtonOnClick}
                     icon={

src/renderer/src/components/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd'
+import { Tooltip } from '@cherrystudio/ui'
 import { Copy } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -47,7 +47,7 @@ const CopyButton: FC<CopyButtonProps> = ({
   )
 
   if (tooltip) {
-    return <Tooltip title={tooltip}>{button}</Tooltip>
+    return <Tooltip content={tooltip}>{button}</Tooltip>
   }
 
   return button

src/renderer/src/components/DraggableList/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap

@@ -20,7 +20,8 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty
           </div>
         </div>
         <div
-          class="ScrollBarContainer-eGlIoO jgKpou virtual-scroller"
+          class="virtual-scroller"
+          data-testid="scrollbar"
           style="height: 100%; width: 100%; overflow-y: auto; position: relative;"
         >
           <div

src/renderer/src/components/HealthStatusIndicator/indicator.tsx

@@ -1,6 +1,7 @@
 import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled, LoadingOutlined } from '@ant-design/icons'
 import { Flex } from '@cherrystudio/ui'
-import { Tooltip, Typography } from 'antd'
+import { Tooltip } from '@cherrystudio/ui'
+import { Typography } from 'antd'
 import React, { memo } from 'react'
 import styled from 'styled-components'
 
@@ -51,7 +52,7 @@ const HealthStatusIndicator: React.FC<HealthStatusIndicatorProps> = ({
   return (
     <Flex className="items-center gap-1.5">
       {latencyText && <LatencyText type="secondary">{latencyText}</LatencyText>}
-      <Tooltip title={tooltip} styles={{ body: { userSelect: 'text' } }}>
+      <Tooltip content={tooltip} className="select-text">
         <IndicatorWrapper $type={overallStatus}>{icon}</IndicatorWrapper>
       </Tooltip>
     </Flex>

src/renderer/src/components/Icons/ReasoningIcon.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd'
+import { Tooltip } from '@cherrystudio/ui'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +9,7 @@ const ReasoningIcon: FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement
 
   return (
     <Container>
-      <Tooltip title={t('models.type.reasoning')} placement="top">
+      <Tooltip content={t('models.type.reasoning')}>
         <Icon className="iconfont icon-thinking" {...(props as any)} />
       </Tooltip>
     </Container>

src/renderer/src/components/Icons/SVGIcon.tsx

@@ -279,7 +279,7 @@ export function PoeLogo(props: SVGProps<SVGSVGElement>) {
           y1="7.303"
           y2="27.715">
           <stop stopColor="#46A6F7"></stop>
-          <stop offset="1" stop-color="#8364FF"></stop>
+          <stop offset="1" stopColor="#8364FF"></stop>
         </linearGradient>
         <linearGradient
           gradientUnits="userSpaceOnUse"
@@ -289,7 +289,7 @@ export function PoeLogo(props: SVGProps<SVGSVGElement>) {
           y1="23.511"
           y2="9.464">
           <stop stopColor="#FF44D3"></stop>
-          <stop offset="1" stop-color="#CF4BFF"></stop>
+          <stop offset="1" stopColor="#CF4BFF"></stop>
         </linearGradient>
       </defs>
     </svg>

src/renderer/src/components/Icons/ToolsCallingIcon.tsx

@@ -1,5 +1,5 @@
 import { ToolOutlined } from '@ant-design/icons'
-import { Tooltip } from 'antd'
+import { Tooltip } from '@cherrystudio/ui'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +10,7 @@ const ToolsCallingIcon: FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElem
 
   return (
     <Container>
-      <Tooltip title={t('models.function_calling')} placement="top">
+      <Tooltip content={t('models.function_calling')}>
         <Icon {...(props as any)} />
       </Tooltip>
     </Container>

src/renderer/src/components/Icons/VisionIcon.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd'
+import { Tooltip } from '@cherrystudio/ui'
 import { ImageIcon } from 'lucide-react'
 import type { FC } from 'react'
 import React from 'react'
@@ -10,7 +10,7 @@ const VisionIcon: FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>,
 
   return (
     <Container>
-      <Tooltip title={t('models.type.vision')} placement="top">
+      <Tooltip content={t('models.type.vision')}>
         <Icon size={15} {...(props as any)} />
       </Tooltip>
     </Container>

src/renderer/src/components/Icons/WebSearchIcon.tsx

@@ -1,5 +1,5 @@
 import { GlobalOutlined } from '@ant-design/icons'
-import { Tooltip } from 'antd'
+import { Tooltip } from '@cherrystudio/ui'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +10,7 @@ const WebSearchIcon: FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement
 
   return (
     <Container>
-      <Tooltip title={t('models.type.websearch')} placement="top">
+      <Tooltip content={t('models.type.websearch')}>
         <Icon {...(props as any)} />
       </Tooltip>
     </Container>

src/renderer/src/components/InputEmbeddingDimension.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import AiProvider from '@renderer/aiCore'
 import { RefreshIcon } from '@renderer/components/Icons'
 import { useProvider } from '@renderer/hooks/useProvider'
 import type { Model } from '@renderer/types'
 import { getErrorMessage } from '@renderer/utils'
-import { InputNumber, Space, Tooltip } from 'antd'
+import { InputNumber, Space } from 'antd'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -74,7 +74,7 @@ const InputEmbeddingDimension = ({
         onChange={onChange}
         disabled={disabled}
       />
-      <Tooltip title={t('knowledge.dimensions_auto_set')}>
+      <Tooltip content={t('knowledge.dimensions_auto_set')}>
         <Button
           role="button"
           aria-label="Get embedding dimension"

src/renderer/src/components/LocalBackupManager.tsx

@@ -1,8 +1,8 @@
 import { DeleteOutlined, ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons'
-import { Button, Flex } from '@cherrystudio/ui'
+import { Button, Flex, Tooltip } from '@cherrystudio/ui'
 import { restoreFromLocal } from '@renderer/services/BackupService'
 import { formatFileSize } from '@renderer/utils'
-import { Modal, Table, Tooltip } from 'antd'
+import { Modal, Table } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -168,7 +168,7 @@ export function LocalBackupManager({ visible, onClose, localBackupDir, restoreMe
         showTitle: false
       },
       render: (fileName: string) => (
-        <Tooltip placement="topLeft" title={fileName}>
+        <Tooltip content={fileName} placement="top-start">
           {fileName}
         </Tooltip>
       )

src/renderer/src/components/MinApp/MinappPopupContainer.tsx

@@ -10,8 +10,7 @@ import {
   PushpinOutlined,
   ReloadOutlined
 } from '@ant-design/icons'
-import { Button } from '@cherrystudio/ui'
+import { Avatar, Button, Tooltip } from '@cherrystudio/ui'
-import { Avatar } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import WindowControls from '@renderer/components/WindowControls'
@@ -26,7 +25,7 @@ import { useTimer } from '@renderer/hooks/useTimer'
 import type { MinAppType } from '@renderer/types'
 import { delay } from '@renderer/utils'
 import { clearWebviewState, getWebviewLoaded, setWebviewLoaded } from '@renderer/utils/webviewStateManager'
-import { Alert, Drawer, Tooltip } from 'antd'
+import { Alert, Drawer } from 'antd'
 import type { WebviewTag } from 'electron'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -401,24 +400,19 @@ const MinappPopupContainer: React.FC = () => {
     return (
       <TitleContainer style={{ backgroundColor: backgroundColor }}>
         <Tooltip
-          title={
+          placement="right-end"
+          className="max-w-100"
+          content={
             <TitleTextTooltip>
               {url ?? appInfo.url} <br />
               <CopyOutlined className="icon-copy" />
               {t('minapp.popup.rightclick_copyurl')}
             </TitleTextTooltip>
-          }
+          }>
-          mouseEnterDelay={0.8}
-          placement="rightBottom"
-          styles={{
-            root: {
-              maxWidth: '400px'
-            }
-          }}>
           <TitleText onContextMenu={(e) => handleCopyUrl(e, url ?? appInfo.url)}>{appInfo.name}</TitleText>
         </Tooltip>
         {appInfo.canOpenExternalLink && (
-          <Tooltip title={t('minapp.popup.openExternal')} mouseEnterDelay={0.8} placement="bottom">
+          <Tooltip placement="bottom" content={t('minapp.popup.openExternal')} delay={800}>
             <TitleButton onClick={() => handleOpenLink(url ?? appInfo.url)}>
               <ExportOutlined />
             </TitleButton>
@@ -429,24 +423,24 @@ const MinappPopupContainer: React.FC = () => {
           className={isWin || isLinux ? 'windows' : ''}
           style={{ marginRight: isWin || isLinux ? '140px' : 0 }}
           isTopNavbar={isTopNavbar}>
-          <Tooltip title={t('minapp.popup.goBack')} mouseEnterDelay={0.8} placement="bottom">
+          <Tooltip placement="bottom" content={t('minapp.popup.goBack')} delay={800}>
             <TitleButton onClick={() => handleGoBack(appInfo.id)}>
               <ArrowLeftOutlined />
             </TitleButton>
           </Tooltip>
-          <Tooltip title={t('minapp.popup.goForward')} mouseEnterDelay={0.8} placement="bottom">
+          <Tooltip placement="bottom" content={t('minapp.popup.goForward')} delay={800}>
             <TitleButton onClick={() => handleGoForward(appInfo.id)}>
               <ArrowRightOutlined />
             </TitleButton>
           </Tooltip>
-          <Tooltip title={t('minapp.popup.refresh')} mouseEnterDelay={0.8} placement="bottom">
+          <Tooltip placement="bottom" content={t('minapp.popup.refresh')} delay={800}>
             <TitleButton onClick={() => handleReload(appInfo.id)}>
               <ReloadOutlined />
             </TitleButton>
           </Tooltip>
           {appInfo.canPinned && (
             <Tooltip
-              title={
+              content={
                 appInfo.isPinned
                   ? isTopNavbar
                     ? t('minapp.remove_from_launchpad')
@@ -455,40 +449,40 @@ const MinappPopupContainer: React.FC = () => {
                     ? t('minapp.add_to_launchpad')
                     : t('minapp.add_to_sidebar')
               }
-              mouseEnterDelay={0.8}
+              placement="bottom"
-              placement="bottom">
+              delay={800}>
               <TitleButton onClick={() => handleTogglePin(appInfo.id)} className={appInfo.isPinned ? 'pinned' : ''}>
                 <PushpinOutlined style={{ fontSize: 16 }} />
               </TitleButton>
             </Tooltip>
           )}
           <Tooltip
-            title={
+            content={
               minappsOpenLinkExternal
                 ? t('minapp.popup.open_link_external_on')
                 : t('minapp.popup.open_link_external_off')
             }
-            mouseEnterDelay={0.8}
+            placement="bottom"
-            placement="bottom">
+            delay={800}>
             <TitleButton onClick={handleToggleOpenExternal} className={minappsOpenLinkExternal ? 'open-external' : ''}>
               <LinkOutlined />
             </TitleButton>
           </Tooltip>
           {isDev && (
-            <Tooltip title={t('minapp.popup.devtools')} mouseEnterDelay={0.8} placement="bottom">
+            <Tooltip placement="bottom" content={t('minapp.popup.devtools')} delay={800}>
               <TitleButton onClick={() => handleOpenDevTools(appInfo.id)}>
                 <CodeOutlined />
               </TitleButton>
             </Tooltip>
           )}
           {canMinimize && (
-            <Tooltip title={t('minapp.popup.minimize')} mouseEnterDelay={0.8} placement="bottom">
+            <Tooltip placement="bottom" content={t('minapp.popup.minimize')} delay={800}>
               <TitleButton onClick={() => handlePopupMinimize()}>
                 <MinusOutlined />
               </TitleButton>
             </Tooltip>
           )}
-          <Tooltip title={t('minapp.popup.close')} mouseEnterDelay={0.8} placement="bottom">
+          <Tooltip placement="bottom" content={t('minapp.popup.close')} delay={800}>
             <TitleButton onClick={() => handlePopupClose(appInfo.id)}>
               <CloseOutlined />
             </TitleButton>

src/renderer/src/components/ModelIdWithTags.tsx

@@ -1,5 +1,6 @@
+import { Tooltip } from '@cherrystudio/ui'
 import type { Model } from '@renderer/types'
-import { Tooltip, Typography } from 'antd'
+import { Typography } from 'antd'
 import { memo } from 'react'
 import styled from 'styled-components'
 
@@ -20,20 +21,13 @@ const ModelIdWithTags = ({
   return (
     <ListItemName ref={ref} $fontSize={fontSize} style={style}>
       <Tooltip
-        styles={{
+        content={
-          root: {
-            width: 'auto',
-            maxWidth: '500px'
-          }
-        }}
-        destroyOnHidden
-        title={
           <Typography.Text style={{ color: 'white' }} copyable={{ text: model.id }}>
             {model.id}
           </Typography.Text>
         }
-        mouseEnterDelay={0.5}
+        className="w-auto max-w-125"
-        placement="top">
+        delay={500}>
         <NameSpan>{model.name}</NameSpan>
       </Tooltip>
       <ModelTagsWithLabel model={model} size={11} style={{ flexShrink: 0 }} />

src/renderer/src/components/ModelSelectButton.tsx

@@ -1,7 +1,6 @@
-import { Button } from '@cherrystudio/ui'
+import type { TooltipProps } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import type { Model } from '@renderer/types'
-import type { TooltipProps } from 'antd'
-import { Tooltip } from 'antd'
 import { useCallback, useMemo } from 'react'
 
 import ModelAvatar from './Avatar/ModelAvatar'
@@ -39,7 +38,7 @@ const ModelSelectButton = ({ model, onSelectModel, modelFilter, noTooltip, toolt
     return button
   } else {
     return (
-      <Tooltip title={model.name} {...tooltipProps}>
+      <Tooltip content={model.name} {...tooltipProps}>
         {button}
       </Tooltip>
     )

src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx

@@ -1,12 +1,11 @@
-import { Flex } from '@cherrystudio/ui'
+import { Button, Flex, Tooltip } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
 import { type HealthResult, HealthStatusIndicator } from '@renderer/components/HealthStatusIndicator'
 import { EditIcon } from '@renderer/components/Icons'
 import { StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons/SVGIcon'
 import type { ApiKeyWithStatus } from '@renderer/types/healthCheck'
 import { maskApiKey } from '@renderer/utils/api'
 import type { InputRef } from 'antd'
-import { Input, List, Popconfirm, Tooltip, Typography } from 'antd'
+import { Input, List, Popconfirm, Typography } from 'antd'
 import { Check, Minus, X } from 'lucide-react'
 import type { FC } from 'react'
 import { memo, useEffect, useRef, useState } from 'react'
@@ -108,7 +107,7 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
               disabled={disabled}
             />
             <Flex className="items-center gap-0">
-              <Tooltip title={t('common.save')}>
+              <Tooltip content={t('common.save')}>
                 <Button
                   color={hasUnsavedChanges ? 'primary' : 'default'}
                   variant={hasUnsavedChanges ? 'solid' : 'light'}
@@ -118,7 +117,7 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
                   isIconOnly
                 />
               </Tooltip>
-              <Tooltip title={t('common.cancel')}>
+              <Tooltip content={t('common.cancel')}>
                 <Button
                   variant="light"
                   startContent={<X size={16} />}
@@ -132,15 +131,12 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
         ) : (
           <>
             <Tooltip
-              title={
+              content={
                 <Typography.Text style={{ color: 'white' }} copyable={{ text: keyStatus.key }}>
                   {keyStatus.key}
                 </Typography.Text>
               }
-              mouseEnterDelay={0.5}
+              delay={500}>
-              placement="top"
-              // 确保不留下明文
-              destroyOnHidden>
               <span style={{ cursor: 'help' }}>{maskApiKey(keyStatus.key)}</span>
             </Tooltip>
 
@@ -149,7 +145,7 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
 
               <Flex className="items-center gap-0">
                 {showHealthCheck && (
-                  <Tooltip title={t('settings.provider.check')} mouseLeaveDelay={0}>
+                  <Tooltip content={t('settings.provider.check')} closeDelay={0}>
                     <Button
                       variant="light"
                       startContent={<StreamlineGoodHealthAndWellBeing size={18} isActive={keyStatus.checking} />}
@@ -159,7 +155,7 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
                     />
                   </Tooltip>
                 )}
-                <Tooltip title={t('common.edit')} mouseLeaveDelay={0}>
+                <Tooltip content={t('common.edit')} closeDelay={0}>
                   <Button
                     variant="light"
                     startContent={<EditIcon size={16} />}
@@ -175,7 +171,7 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
                   okText={t('common.confirm')}
                   cancelText={t('common.cancel')}
                   okButtonProps={{ color: 'danger' }}>
-                  <Tooltip title={t('common.delete')} mouseLeaveDelay={0}>
+                  <Tooltip content={t('common.delete')} closeDelay={0}>
                     <Button variant="light" startContent={<Minus size={16} />} isDisabled={disabled} isIconOnly />
                   </Tooltip>
                 </Popconfirm>

src/renderer/src/components/Popups/ApiKeyListPopup/list.tsx

@@ -1,5 +1,4 @@
-import { Flex } from '@cherrystudio/ui'
+import { Button, Flex, Tooltip } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
 import { DeleteIcon } from '@renderer/components/Icons'
 import { StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons/SVGIcon'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -11,7 +10,7 @@ import { isProviderSupportAuth } from '@renderer/services/ProviderService'
 import type { PreprocessProviderId, WebSearchProviderId } from '@renderer/types'
 import type { ApiKeyWithStatus } from '@renderer/types/healthCheck'
 import { HealthStatus } from '@renderer/types/healthCheck'
-import { Card, List, Popconfirm, Space, Tooltip, Typography } from 'antd'
+import { Card, List, Popconfirm, Space, Typography } from 'antd'
 import { Plus } from 'lucide-react'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -143,7 +142,7 @@ export const ApiKeyList: FC<ApiKeyListProps> = ({ provider, updateProvider, show
                 okText={t('common.confirm')}
                 cancelText={t('common.cancel')}
                 okButtonProps={{ color: 'danger' }}>
-                <Tooltip title={t('settings.provider.remove_invalid_keys')} placement="top" mouseLeaveDelay={0}>
+                <Tooltip content={t('settings.provider.remove_invalid_keys')} closeDelay={0}>
                   <Button
                     variant="light"
                     startContent={<DeleteIcon size={16} className="lucide-custom" />}
@@ -155,7 +154,7 @@ export const ApiKeyList: FC<ApiKeyListProps> = ({ provider, updateProvider, show
               </Popconfirm>
 
               {/* 批量检查 */}
-              <Tooltip title={t('settings.provider.check_all_keys')} placement="top" mouseLeaveDelay={0}>
+              <Tooltip content={t('settings.provider.check_all_keys')} closeDelay={0}>
                 <Button
                   variant="light"
                   startContent={<StreamlineGoodHealthAndWellBeing size={'1.2em'} />}

src/renderer/src/components/Popups/MultiSelectionPopup.tsx

@@ -1,8 +1,7 @@
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { CopyIcon, DeleteIcon } from '@renderer/components/Icons'
 import { useChatContext } from '@renderer/hooks/useChatContext'
 import type { Topic } from '@renderer/types'
-import { Tooltip } from 'antd'
 import { Save, X } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -36,7 +35,7 @@ const MultiSelectActionPopup: FC<Props> = ({ topic }) => {
       <ActionBar>
         <SelectionCount>{t('common.selectedMessages', { count: selectedMessageIds.length })}</SelectionCount>
         <ActionButtons>
-          <Tooltip title={t('common.save')}>
+          <Tooltip content={t('common.save')}>
             <Button
               radius="full"
               variant="light"
@@ -46,7 +45,7 @@ const MultiSelectActionPopup: FC<Props> = ({ topic }) => {
               isIconOnly
             />
           </Tooltip>
-          <Tooltip title={t('common.copy')}>
+          <Tooltip content={t('common.copy')}>
             <Button
               radius="full"
               variant="light"
@@ -56,7 +55,7 @@ const MultiSelectActionPopup: FC<Props> = ({ topic }) => {
               isIconOnly
             />
           </Tooltip>
-          <Tooltip title={t('common.delete')}>
+          <Tooltip content={t('common.delete')}>
             <Button
               radius="full"
               color="danger"
@@ -67,7 +66,7 @@ const MultiSelectActionPopup: FC<Props> = ({ topic }) => {
             />
           </Tooltip>
         </ActionButtons>
-        <Tooltip title={t('chat.navigation.close')}>
+        <Tooltip content={t('chat.navigation.close')}>
           <Button radius="full" variant="light" startContent={<X size={16} />} onPress={handleClose} isIconOnly />
         </Tooltip>
       </ActionBar>
@@ -92,7 +91,7 @@ const ActionBar = styled.div`
   background-color: var(--color-background);
   padding: 4px 4px;
   border-radius: 99px;
-  box-shadow: 0px 2px 8px 0px rgb(128 128 128 / 20%);
+  box-shadow: 0 2px 8px 0 rgb(128 128 128 / 20%);
   border: 0.5px solid var(--color-border);
   gap: 16px;
 `

src/renderer/src/components/Popups/SaveToKnowledgePopup.tsx

@@ -1,4 +1,4 @@
-import { ColFlex, Flex } from '@cherrystudio/ui'
+import { ColFlex, Flex, HelpTooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import CustomTag from '@renderer/components/Tags/CustomTag'
 import { TopView } from '@renderer/components/TopView'
@@ -14,8 +14,8 @@ import {
   processMessageContent,
   processTopicContent
 } from '@renderer/utils/knowledge'
-import { Form, Modal, Select, Tooltip, Typography } from 'antd'
+import { Form, Modal, Select, Typography } from 'antd'
-import { Check, CircleHelp } from 'lucide-react'
+import { Check } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -375,9 +375,7 @@ const PopupContainer: React.FC<Props> = ({ source, title, resolve }) => {
                       {option.count}
                     </CustomTag>
                     <span>{option.label}</span>
-                    <Tooltip title={option.description} mouseLeaveDelay={0}>
+                    <HelpTooltip content={option.description} closeDelay={0} />
-                      <CircleHelp size={16} style={{ cursor: 'help' }} />
-                    </Tooltip>
                   </Flex>
                   {selectedTypes.includes(option.type) && <Check size={16} color={TAG_COLORS.SELECTED} />}
                 </ContentTypeItem>

src/renderer/src/components/Popups/SelectModelPopup/__tests__/__snapshots__/TagFilterSection.test.tsx.snap

@@ -16,7 +16,8 @@ exports[`TagFilterSection > rendering > should match snapshot 1`] = `
     class="c0"
   >
     <div
-      class="box-border flex flex-wrap gap-1"
+      class="flex-wrap gap-1"
+      data-testid="flex"
     >
       <span
         class="c1"

src/renderer/src/components/Popups/SelectModelPopup/popup.tsx

@@ -1,4 +1,5 @@
 import { PushpinOutlined } from '@ant-design/icons'
+import { Tooltip } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
 import { Avatar } from '@cherrystudio/ui'
 import { FreeTrialModelTag } from '@renderer/components/FreeTrialModelTag'
@@ -13,7 +14,7 @@ import type { Model, ModelType, Provider } from '@renderer/types'
 import { objectEntries } from '@renderer/types'
 import { classNames, filterModelsByKeywords, getFancyProviderName } from '@renderer/utils'
 import { getModelTags } from '@renderer/utils/model'
-import { Divider, Empty, Modal, Tooltip } from 'antd'
+import { Divider, Empty, Modal } from 'antd'
 import { first, sortBy } from 'lodash'
 import { Settings2 } from 'lucide-react'
 import React, {
@@ -183,7 +184,7 @@ const PopupContainer: React.FC<Props> = ({ model, filter: baseFilter, showTagFil
         type: 'group',
         name: getFancyProviderName(p),
         actions: p.id !== 'cherryai' && (
-          <Tooltip title={t('navigate.provider_settings')} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
+          <Tooltip content={t('navigate.provider_settings')} delay={500} closeDelay={0}>
             <Settings2
               size={12}
               color="var(--color-text)"

src/renderer/src/components/Preview/ImageToolButton.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
-import { Tooltip } from 'antd'
 import { memo } from 'react'
 
 interface ImageToolButtonProps {
@@ -10,7 +9,7 @@ interface ImageToolButtonProps {
 
 const ImageToolButton = ({ tooltip, icon, onPress }: ImageToolButtonProps) => {
   return (
-    <Tooltip title={tooltip} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
+    <Tooltip content={tooltip} delay={500} closeDelay={0}>
       <Button radius="full" startContent={icon} onPress={onPress} isIconOnly aria-label={tooltip} />
     </Tooltip>
   )

src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx

@@ -3,14 +3,23 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ImageToolButton from '../ImageToolButton'
 
-// Mock antd components
+// Mock components
 vi.mock('antd', () => ({
   Button: vi.fn(({ children, onClick, ...props }) => (
     <button type="button" data-testid="custom-button" onClick={onClick} {...props}>
       {children}
     </button>
-  )),
+  ))
-  Tooltip: vi.fn(({ children, title }) => <div title={title}>{children}</div>)
+}))
+
+vi.mock('@cherrystudio/ui', () => ({
+  Button: ({ children, onPress, disabled, isDisabled, startContent, ...props }: any) => (
+    <button type="button" data-testid="button" onClick={onPress} disabled={disabled || isDisabled} {...props}>
+      {startContent}
+      {children}
+    </button>
+  ),
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>
 }))
 
 describe('ImageToolButton', () => {

src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap

@@ -2,24 +2,17 @@
 
 exports[`ImageToolButton > should match snapshot 1`] = `
 <DocumentFragment>
-  <div
+  <button
-    title="Test tooltip"
+    aria-label="Test tooltip"
+    data-testid="button"
+    radius="full"
+    type="button"
   >
-    <button
+    <span
-      aria-label="Test tooltip"
+      data-testid="test-icon"
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent transform-gpu data-[pressed=true]:scale-[0.97] cursor-pointer outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-small gap-2 rounded-full px-0 !gap-0 transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground min-w-10 w-10 h-10 data-[hover=true]:opacity-hover"
-      data-react-aria-pressable="true"
-      tabindex="0"
-      type="button"
     >
-      <span
+      Icon
-        aria-hidden="true"
+    </span>
-        data-testid="test-icon"
+  </button>
-        focusable="false"
-      >
-        Icon
-      </span>
-    </button>
-  </div>
 </DocumentFragment>
 `;

src/renderer/src/components/ProviderLogoPicker/index.tsx

@@ -1,8 +1,9 @@
 import { SearchOutlined } from '@ant-design/icons'
+import { Tooltip } from '@cherrystudio/ui'
 import { ProviderAvatarPrimitive } from '@renderer/components/ProviderAvatar'
 import { PROVIDER_LOGO_MAP } from '@renderer/config/providers'
 import { getProviderLabel } from '@renderer/i18n/label'
-import { Input, Tooltip } from 'antd'
+import { Input } from 'antd'
 import type { FC } from 'react'
 import { useMemo, useState } from 'react'
 import styled from 'styled-components'
@@ -51,9 +52,14 @@ const ProviderLogoPicker: FC<Props> = ({ onProviderClick }) => {
       </SearchContainer>
       <LogoGrid>
         {filteredProviders.map(({ id, name, logo }) => (
-          <Tooltip key={id} title={name} placement="top" mouseLeaveDelay={0}>
+          <Tooltip key={id} content={name} closeDelay={0}>
             <LogoItem onClick={(e) => handleProviderClick(e, id)}>
-              <ProviderAvatarPrimitive providerId={id} style={{ width: '52px', height: '52px' }} providerName={name} logoSrc={logo} />
+              <ProviderAvatarPrimitive
+                providerId={id}
+                style={{ width: '52px', height: '52px' }}
+                providerName={name}
+                logoSrc={logo}
+              />
             </LogoItem>
           </Tooltip>
         ))}

src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx

@@ -1,8 +1,8 @@
 import { CopyOutlined } from '@ant-design/icons'
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { DEFAULT_LANGUAGES, getHighlighter, getShiki } from '@renderer/utils/shiki'
 import { NodeViewContent, NodeViewWrapper, type ReactNodeViewProps, ReactNodeViewRenderer } from '@tiptap/react'
-import { Select, Tooltip } from 'antd'
+import { Select } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
@@ -66,7 +66,7 @@ const CodeBlockNodeView: FC<ReactNodeViewProps> = (props) => {
           options={languageOptions.map((lang) => ({ value: lang, label: lang }))}
           style={{ minWidth: 90 }}
         />
-        <Tooltip title="Copy">
+        <Tooltip content="Copy">
           <Button
             size="sm"
             variant="light"

src/renderer/src/components/RichEditor/index.tsx

@@ -1,8 +1,8 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { ContentSearch, type ContentSearchRef } from '@renderer/components/ContentSearch'
 import DragHandle from '@tiptap/extension-drag-handle-react'
 import { EditorContent } from '@tiptap/react'
-import { Tooltip } from 'antd'
 import { t } from 'i18next'
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, GripVertical, Plus, Trash2 } from 'lucide-react'
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
@@ -402,12 +402,12 @@ const RichEditor = ({
       <Scrollbar ref={scrollContainerRef} style={{ flex: 1, display: 'flex' }}>
         <StyledEditorContent>
           <PlusButton editor={editor} onElementClick={handlePlusButtonClick}>
-            <Tooltip title={t('richEditor.plusButton')}>
+            <Tooltip content={t('richEditor.plusButton')}>
               <Plus />
             </Tooltip>
           </PlusButton>
           <DragHandle editor={editor} onElementDragEnd={handleDragEnd}>
-            <Tooltip title={t('richEditor.dragHandle')}>
+            <Tooltip content={t('richEditor.dragHandle')}>
               <GripVertical />
             </Tooltip>
           </DragHandle>

src/renderer/src/components/RichEditor/toolbar.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd'
+import { Tooltip } from '@cherrystudio/ui'
 import type { TFunction } from 'i18next'
 import type { LucideProps } from 'lucide-react'
 import type { ForwardRefExoticComponent, RefAttributes } from 'react'
@@ -177,7 +177,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({ editor, formattingState, onCom
         )
 
         return (
-          <Tooltip key={item.id} title={tooltipText} placement="top">
+          <Tooltip key={item.id} content={tooltipText}>
             {buttonElement}
           </Tooltip>
         )

src/renderer/src/components/S3BackupManager.tsx

@@ -1,9 +1,9 @@
 import { DeleteOutlined, ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons'
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { restoreFromS3 } from '@renderer/services/BackupService'
 import type { S3Config } from '@renderer/types'
 import { formatFileSize } from '@renderer/utils'
-import { Modal, Table, Tooltip } from 'antd'
+import { Modal, Table } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -207,7 +207,7 @@ export function S3BackupManager({ visible, onClose, s3Config, restoreMethod }: S
         showTitle: false
       },
       render: (fileName: string) => (
-        <Tooltip placement="topLeft" title={fileName}>
+        <Tooltip placement="top-start" content={fileName}>
           {fileName}
         </Tooltip>
       )

src/renderer/src/components/Tab/TabContainer.tsx

@@ -1,5 +1,6 @@
 import { PlusOutlined } from '@ant-design/icons'
 import { Sortable, useDndReorder } from '@cherrystudio/ui'
+import { Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import HorizontalScrollContainer from '@renderer/components/HorizontalScrollContainer'
 import { isMac } from '@renderer/config/constant'
@@ -16,7 +17,6 @@ import { addTab, removeTab, setActiveTab, setTabs } from '@renderer/store/tabs'
 import type { MinAppType } from '@renderer/types'
 import { classNames } from '@renderer/utils'
 import { ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { Tooltip } from 'antd'
 import type { LRUCache } from 'lru-cache'
 import {
   FileSearch,
@@ -263,9 +263,9 @@ const TabsContainer: React.FC<TabsContainerProps> = ({ children }) => {
         </HorizontalScrollContainer>
         <RightButtonsContainer>
           <Tooltip
-            title={t('settings.theme.title') + ': ' + getThemeModeLabel(settedTheme)}
+            placement="bottom"
-            mouseEnterDelay={0.8}
+            content={t('settings.theme.title') + ': ' + getThemeModeLabel(settedTheme)}
-            placement="bottom">
+            delay={800}>
             <ThemeButton onClick={toggleTheme}>
               {settedTheme === ThemeMode.dark ? (
                 <Moon size={16} />

src/renderer/src/components/Tags/CustomTag.tsx

@@ -1,5 +1,5 @@
 import { CloseOutlined } from '@ant-design/icons'
-import { Tooltip } from 'antd'
+import { Tooltip } from '@cherrystudio/ui'
 import type { CSSProperties, FC, MouseEventHandler } from 'react'
 import { memo, useMemo } from 'react'
 import styled from 'styled-components'
@@ -61,7 +61,7 @@ const CustomTag: FC<CustomTagProps> = ({
   )
 
   return tooltip ? (
-    <Tooltip title={tooltip} placement="top" mouseEnterDelay={0.3}>
+    <Tooltip content={tooltip} delay={300}>
       {tagContent}
     </Tooltip>
   ) : (

src/renderer/src/components/TooltipIcons/HelpTooltip.tsx

@@ -1,28 +0,0 @@
-import type { TooltipProps } from 'antd'
-import { Tooltip } from 'antd'
-import { HelpCircle } from 'lucide-react'
-
-type InheritedTooltipProps = Omit<TooltipProps, 'children'>
-
-interface HelpTooltipProps extends InheritedTooltipProps {
-  iconColor?: string
-  iconSize?: string | number
-  iconStyle?: React.CSSProperties
-}
-
-const HelpTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: HelpTooltipProps) => {
-  return (
-    <Tooltip {...rest}>
-      <HelpCircle
-        size={iconSize}
-        color={iconColor}
-        style={{ ...iconStyle, cursor: 'help' }}
-        role="img"
-        aria-label="Help"
-        className="relative z-10"
-      />
-    </Tooltip>
-  )
-}
-
-export default HelpTooltip

src/renderer/src/components/TooltipIcons/InfoTooltip.tsx

@@ -1,21 +0,0 @@
-import type { TooltipProps } from 'antd'
-import { Tooltip } from 'antd'
-import { Info } from 'lucide-react'
-
-type InheritedTooltipProps = Omit<TooltipProps, 'children'>
-
-interface InfoTooltipProps extends InheritedTooltipProps {
-  iconColor?: string
-  iconSize?: string | number
-  iconStyle?: React.CSSProperties
-}
-
-const InfoTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: InfoTooltipProps) => {
-  return (
-    <Tooltip {...rest}>
-      <Info size={iconSize} color={iconColor} style={{ ...iconStyle }} role="img" aria-label="Information" />
-    </Tooltip>
-  )
-}
-
-export default InfoTooltip

src/renderer/src/components/TooltipIcons/WarnTooltip.tsx

@@ -1,26 +0,0 @@
-import type { TooltipProps } from 'antd'
-import { Tooltip } from 'antd'
-import { AlertTriangle } from 'lucide-react'
-
-type InheritedTooltipProps = Omit<TooltipProps, 'children'>
-
-interface WarnTooltipProps extends InheritedTooltipProps {
-  iconColor?: string
-  iconSize?: string | number
-  iconStyle?: React.CSSProperties
-}
-
-const WarnTooltip = ({
-  iconColor = 'var(--color-status-warning)',
-  iconSize = 14,
-  iconStyle,
-  ...rest
-}: WarnTooltipProps) => {
-  return (
-    <Tooltip {...rest}>
-      <AlertTriangle size={iconSize} color={iconColor} style={{ ...iconStyle }} role="img" aria-label="Information" />
-    </Tooltip>
-  )
-}
-
-export default WarnTooltip

src/renderer/src/components/TooltipIcons/__tests__/InfoTooltip.test.tsx

@@ -1,38 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import InfoTooltip from '../InfoTooltip'
-
-vi.mock('antd', () => ({
-  Tooltip: ({ children, title }: { children: React.ReactNode; title: string }) => (
-    <div>
-      {children}
-      {title && <div>{title}</div>}
-    </div>
-  )
-}))
-
-vi.mock('lucide-react', () => ({
-  Info: ({ ref, ...props }) => (
-    <div {...props} ref={ref} role="img" aria-label="Information">
-      Info
-    </div>
-  )
-}))
-
-describe('InfoTooltip', () => {
-  it('should match snapshot', () => {
-    const { container } = render(
-      <InfoTooltip title="Test tooltip" placement="top" iconColor="#1890ff" iconStyle={{ fontSize: '16px' }} />
-    )
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('should pass title prop to the underlying Tooltip component', () => {
-    const tooltipText = 'This is helpful information'
-    render(<InfoTooltip title={tooltipText} />)
-
-    expect(screen.getByRole('img', { name: 'Information' })).toBeInTheDocument()
-    expect(screen.getByText(tooltipText)).toBeInTheDocument()
-  })
-})

src/renderer/src/components/TooltipIcons/__tests__/__snapshots__/InfoTooltip.test.tsx.snap

@@ -1,18 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`InfoTooltip > should match snapshot 1`] = `
-<div>
-  <div
-    aria-label="Information"
-    color="#1890ff"
-    role="img"
-    size="14"
-    style="font-size: 16px;"
-  >
-    Info
-  </div>
-  <div>
-    Test tooltip
-  </div>
-</div>
-`;

src/renderer/src/components/TooltipIcons/index.ts

@@ -1,3 +0,0 @@
-export { default as HelpTooltip } from './HelpTooltip'
-export { default as InfoTooltip } from './InfoTooltip'
-export { default as WarnTooltip } from './WarnTooltip'

src/renderer/src/components/TranslateButton.tsx

@@ -1,10 +1,9 @@
 import { LoadingOutlined } from '@ant-design/icons'
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import useTranslate from '@renderer/hooks/useTranslate'
 import { translateText } from '@renderer/services/TranslateService'
-import { Tooltip } from 'antd'
 import { Languages } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -66,10 +65,8 @@ const TranslateButton: FC<Props> = ({ text, onTranslated, disabled, style, isLoa
 
   return (
     <Tooltip
-      placement="top"
+      content={t('chat.input.translate', { target_language: getLanguageByLangcode(targetLanguage).label() })}
-      title={t('chat.input.translate', { target_language: getLanguageByLangcode(targetLanguage).label() })}
+      closeDelay={0}>
-      mouseLeaveDelay={0}
-      arrow>
       <Button
         onPress={handleTranslate}
         isDisabled={disabled || isTranslating}

src/renderer/src/components/WebdavBackupManager.tsx

@@ -1,8 +1,8 @@
 import { DeleteOutlined, ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons'
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { restoreFromWebdav } from '@renderer/services/BackupService'
 import { formatFileSize } from '@renderer/utils'
-import { Modal, Table, Tooltip } from 'antd'
+import { Modal, Table } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -214,7 +214,7 @@ export function WebdavBackupManager({
         showTitle: false
       },
       render: (fileName: string) => (
-        <Tooltip placement="topLeft" title={fileName}>
+        <Tooltip placement="top-start" content={fileName}>
           {fileName}
         </Tooltip>
       )

src/renderer/src/components/WindowControls/index.tsx

@@ -1,5 +1,5 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { isLinux, isWin } from '@renderer/config/constant'
-import { Tooltip } from 'antd'
 import { Minus, Square, X } from 'lucide-react'
 import type { SVGProps } from 'react'
 import { useEffect, useState } from 'react'
@@ -11,6 +11,8 @@ interface WindowRestoreIconProps extends SVGProps<SVGSVGElement> {
   size?: string | number
 }
 
+const DEFAULT_DELAY = 1000
+
 export const WindowRestoreIcon = ({ size = '1.1em', ...props }: WindowRestoreIconProps) => (
   <svg
     width={size}
@@ -44,8 +46,6 @@ export const WindowRestoreIcon = ({ size = '1.1em', ...props }: WindowRestoreIco
   </svg>
 )
 
-const DEFAULT_DELAY = 1
-
 const WindowControls: React.FC = () => {
   const [isMaximized, setIsMaximized] = useState(false)
   const { t } = useTranslation()
@@ -85,20 +85,20 @@ const WindowControls: React.FC = () => {
 
   return (
     <WindowControlsContainer>
-      <Tooltip title={t('navbar.window.minimize')} placement="bottom" mouseEnterDelay={DEFAULT_DELAY}>
+      <Tooltip placement="bottom" content={t('navbar.window.minimize')} delay={DEFAULT_DELAY}>
         <ControlButton onClick={handleMinimize} aria-label="Minimize">
           <Minus size={14} />
         </ControlButton>
       </Tooltip>
       <Tooltip
-        title={isMaximized ? t('navbar.window.restore') : t('navbar.window.maximize')}
         placement="bottom"
-        mouseEnterDelay={DEFAULT_DELAY}>
+        content={isMaximized ? t('navbar.window.restore') : t('navbar.window.maximize')}
+        delay={DEFAULT_DELAY}>
         <ControlButton onClick={handleMaximize} aria-label={isMaximized ? 'Restore' : 'Maximize'}>
           {isMaximized ? <WindowRestoreIcon size={14} /> : <Square size={14} />}
         </ControlButton>
       </Tooltip>
-      <Tooltip title={t('navbar.window.close')} placement="bottom" mouseEnterDelay={DEFAULT_DELAY}>
+      <Tooltip placement="bottom" content={t('navbar.window.close')} delay={DEFAULT_DELAY}>
         <ControlButton $isClose onClick={handleClose} aria-label="Close">
           <X size={17} />
         </ControlButton>

src/renderer/src/components/__tests__/CustomTag.test.tsx

@@ -28,18 +28,16 @@ describe('CustomTag', () => {
         reasoning
       </CustomTag>
     )
-    // 鼠标悬停触发 Tooltip
+    // 鼠标悬停触发 Tooltip（mock 直接渲染 tooltip 内容）
     await userEvent.hover(screen.getByText('reasoning'))
-    expect(await screen.findByText('reasoning model')).toBeInTheDocument()
+    expect(screen.getByTestId('tooltip-content')).toHaveTextContent('reasoning model')
   })
 
   it('should not render Tooltip when tooltip is not set', () => {
     render(<CustomTag color="#ff0000">no tooltip</CustomTag>)
 
     expect(screen.getByText('no tooltip')).toBeInTheDocument()
-    // 不应有 tooltip 相关内容
+    expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument()
-    expect(document.querySelector('.ant-tooltip')).toBeNull()
-    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
   })
 
   it('should not allow click when disabled', async () => {

src/renderer/src/components/__tests__/InputEmbeddingDimension.test.tsx

@@ -54,19 +54,26 @@ vi.mock('antd', () => {
     </button>
   )
 
-  const MockTooltip: React.FC<React.PropsWithChildren<{ title: string }>> = ({ children, title }) => (
+  return {
+    Button: MockButton,
+    InputNumber: MockInputNumber,
+    Space: { Compact: MockSpaceCompact }
+  }
+})
+
+vi.mock('@cherrystudio/ui', () => ({
+  Button: ({ children, onPress, disabled, isDisabled, startContent, ...props }: any) => (
+    <button type="button" data-testid="button" onClick={onPress} disabled={disabled || isDisabled} {...props}>
+      {startContent}
+      {children}
+    </button>
+  ),
+  Tooltip: ({ children, title }: { children: React.ReactNode; title: React.ReactNode }) => (
     <div data-testid="tooltip" data-title={title}>
       {children}
     </div>
   )
-
+}))
-  return {
-    Button: MockButton,
-    InputNumber: MockInputNumber,
-    Space: { Compact: MockSpaceCompact },
-    Tooltip: MockTooltip
-  }
-})
 
 // Mock dependencies
 vi.mock('@renderer/aiCore', () => ({

src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap

@@ -14,22 +14,17 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
   />
   <div
     data-testid="tooltip"
-    data-title="自动设置维度"
   >
     <button
       aria-label="Get embedding dimension"
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent transform-gpu data-[pressed=true]:scale-[0.97] cursor-pointer outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-tiny gap-2 rounded-small px-0 !gap-0 transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground min-w-8 w-8 h-8 data-[hover=true]:opacity-hover"
+      data-testid="button"
-      data-react-aria-pressable="true"
       role="button"
-      tabindex="0"
       type="button"
     >
       <svg
-        aria-hidden="true"
         aria-label="refresh"
         class=""
         data-testid="refresh-icon"
-        focusable="false"
         role="img"
         size="16"
       >
@@ -54,32 +49,23 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
   />
   <div
     data-testid="tooltip"
-    data-title="自动设置维度"
   >
     <button
       aria-label="Get embedding dimension"
-      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent transform-gpu data-[pressed=true]:scale-[0.97] cursor-pointer outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-tiny gap-2 rounded-small opacity-disabled pointer-events-none px-0 !gap-0 transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground min-w-8 w-8 h-8 data-[hover=true]:opacity-hover"
+      data-testid="button"
-      data-disabled="true"
-      data-react-aria-pressable="true"
       disabled=""
       role="button"
       type="button"
     >
       <svg
-        aria-hidden="true"
         aria-label="refresh"
         class="animation-rotate"
         data-testid="refresh-icon"
-        focusable="false"
         role="img"
         size="16"
       >
         RefreshIcon
       </svg>
-      <span
-        class="heroui-ripple"
-        style="position: absolute; background-color: currentColor; border-radius: 100%; transform-origin: center; pointer-events: none; overflow: hidden; inset: 0; z-index: 0; top: 0px; left: 0px; width: 0px; height: 0px; transform: scale(0); opacity: 0.35;"
-      />
     </button>
   </div>
 </div>

src/renderer/src/components/app/PinnedMinapps.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
@@ -5,7 +6,7 @@ import { useMinapps } from '@renderer/hooks/useMinapps'
 import { useNavbarPosition } from '@renderer/hooks/useNavbar'
 import type { MinAppType } from '@renderer/types'
 import type { MenuProps } from 'antd'
-import { Dropdown, Tooltip } from 'antd'
+import { Dropdown } from 'antd'
 import type { FC } from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -86,16 +87,18 @@ export const SidebarOpenedMinappTabs: FC = () => {
             const isActive = minappShow && currentMinappId === app.id
 
             return (
-              <Tooltip key={app.id} title={app.name} mouseEnterDelay={0.8} placement="right">
+              <Dropdown
-                <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']} overlayStyle={{ zIndex: 10000 }}>
+                key={app.id}
-                  <Icon
+                menu={{ items: menuItems }}
-                    theme={theme}
+                trigger={['contextMenu']}
-                    onClick={() => handleOnClick(app)}
+                overlayStyle={{ zIndex: 10000 }}>
-                    className={`${isActive ? 'opened-active' : ''}`}>
+                {/* FIXME: Antd Dropdown is not compatible with HeroUI Tooltip */}
-                    <MinAppIcon size={20} app={app} style={{ borderRadius: 6 }} sidebar />
+                {/* <Tooltip content={app.name} placement="right" delay={800}> */}
-                  </Icon>
+                <Icon theme={theme} onClick={() => handleOnClick(app)} className={`${isActive ? 'opened-active' : ''}`}>
-                </Dropdown>
+                  <MinAppIcon size={20} app={app} style={{ borderRadius: 6 }} sidebar />
-              </Tooltip>
+                </Icon>
+                {/* </Tooltip> */}
+              </Dropdown>
             )
           })}
         </Menus>
@@ -126,7 +129,7 @@ export const SidebarPinnedApps: FC = () => {
         ]
         const isActive = minappShow && currentMinappId === app.id
         return (
-          <Tooltip key={app.id} title={app.name} mouseEnterDelay={0.8} placement="right">
+          <Tooltip key={app.id} content={app.name} placement="right" delay={800}>
             <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']} overlayStyle={{ zIndex: 10000 }}>
               <Icon
                 theme={theme}

src/renderer/src/components/app/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { Avatar, EmojiAvatar } from '@cherrystudio/ui'
+import { Avatar, EmojiAvatar, Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { isMac } from '@renderer/config/constant'
 import { UserAvatar } from '@renderer/config/env'
@@ -13,7 +13,6 @@ import { useSettings } from '@renderer/hooks/useSettings'
 import { getSidebarIconLabel, getThemeModeLabel } from '@renderer/i18n/label'
 import { isEmoji } from '@renderer/utils'
 import { ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { Tooltip } from 'antd'
 import {
   Code,
   FileSearch,
@@ -90,9 +89,9 @@ const Sidebar: FC = () => {
       </MainMenusContainer>
       <Menus>
         <Tooltip
-          title={t('settings.theme.title') + ': ' + getThemeModeLabel(settedTheme)}
+          placement="right"
-          mouseEnterDelay={0.8}
+          content={t('settings.theme.title') + ': ' + getThemeModeLabel(settedTheme)}
-          placement="right">
+          delay={800}>
           <Icon theme={theme} onClick={toggleTheme}>
             {settedTheme === ThemeMode.dark ? (
               <Moon size={20} className="icon" />
@@ -103,7 +102,7 @@ const Sidebar: FC = () => {
             )}
           </Icon>
         </Tooltip>
-        <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
+        <Tooltip placement="right" content={t('settings.title')} delay={800}>
           <StyledLink
             onClick={async () => {
               hideMinappPopup()
@@ -161,7 +160,7 @@ const MainMenus: FC = () => {
     const isActive = path === '/' ? isRoute(path) : isRoutes(path)
 
     return (
-      <Tooltip key={icon} title={getSidebarIconLabel(icon)} mouseEnterDelay={0.8} placement="right">
+      <Tooltip key={icon} placement="right" content={getSidebarIconLabel(icon)} delay={800}>
         <StyledLink
           onClick={async () => {
             hideMinappPopup()

src/renderer/src/pages/code/CodeToolsPage.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@cherrystudio/ui'
+import { Avatar, Button, Tooltip } from '@cherrystudio/ui'
-import { Avatar } from '@cherrystudio/ui'
 import AiProvider from '@renderer/aiCore'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import ModelSelector from '@renderer/components/ModelSelector'
@@ -18,7 +17,7 @@ import { setIsBunInstalled } from '@renderer/store/mcp'
 import type { EndpointType, Model } from '@renderer/types'
 import type { TerminalConfig } from '@shared/config/constant'
 import { codeTools, terminalApps } from '@shared/config/constant'
-import { Alert, Checkbox, Input, Popover, Select, Space, Tooltip } from 'antd'
+import { Alert, Checkbox, Input, Popover, Select, Space } from 'antd'
 import { ArrowUpRight, Download, FolderOpen, HelpCircle, Terminal, X } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -458,7 +457,7 @@ const CodeToolsPage: FC = () => {
                     selectedTerminal !== terminalApps.cmd &&
                     selectedTerminal !== terminalApps.powershell &&
                     selectedTerminal !== terminalApps.windowsTerminal && (
-                      <Tooltip title={terminalCustomPaths[selectedTerminal] || t('code.set_custom_path')}>
+                      <Tooltip content={terminalCustomPaths[selectedTerminal] || t('code.set_custom_path')}>
                         <Button
                           startContent={<FolderOpen size={16} />}
                           isIconOnly

src/renderer/src/pages/home/ChatNavbar.tsx

@@ -1,4 +1,5 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { NavbarHeader } from '@renderer/components/app/Navbar'
 import SearchPopup from '@renderer/components/Popups/SearchPopup'
@@ -8,7 +9,6 @@ import { useShortcut } from '@renderer/hooks/useShortcuts'
 import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import type { Assistant, Topic } from '@renderer/types'
-import { Tooltip } from 'antd'
 import { t } from 'i18next'
 import { Menu, PanelLeftClose, PanelRightClose, Search } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
@@ -68,14 +68,14 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
     <NavbarHeader className="home-navbar">
       <RowFlex className="items-center">
         {showAssistants && (
-          <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={0.8}>
+          <Tooltip placement="bottom" content={t('navbar.hide_sidebar')} delay={800}>
             <NavbarIcon onClick={toggleShowAssistants}>
               <PanelLeftClose size={18} />
             </NavbarIcon>
           </Tooltip>
         )}
         {!showAssistants && (
-          <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
+          <Tooltip placement="bottom" content={t('navbar.show_sidebar')} delay={800}>
             <NavbarIcon onClick={() => toggleShowAssistants()} style={{ marginRight: 8 }}>
               <PanelRightClose size={18} />
             </NavbarIcon>
@@ -98,25 +98,25 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
       </RowFlex>
       <RowFlex className="items-center gap-2">
         <UpdateAppButton />
-        <Tooltip title={t('navbar.expand')} mouseEnterDelay={0.8}>
+        <Tooltip placement="bottom" content={t('navbar.expand')} delay={800}>
           <NarrowIcon onClick={handleNarrowModeToggle}>
             <i className="iconfont icon-icon-adaptive-width"></i>
           </NarrowIcon>
         </Tooltip>
-        <Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
+        <Tooltip placement="bottom" content={t('chat.assistant.search.placeholder')} delay={800}>
           <NavbarIcon onClick={() => SearchPopup.show()}>
             <Search size={18} />
           </NavbarIcon>
         </Tooltip>
         {topicPosition === 'right' && !showTopics && (
-          <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
+          <Tooltip placement="bottom" content={t('navbar.show_sidebar')} delay={2000}>
             <NavbarIcon onClick={toggleShowTopics}>
               <PanelLeftClose size={18} />
             </NavbarIcon>
           </Tooltip>
         )}
         {topicPosition === 'right' && showTopics && (
-          <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={2}>
+          <Tooltip placement="bottom" content={t('navbar.hide_sidebar')} delay={2000}>
             <NavbarIcon onClick={toggleShowTopics}>
               <PanelRightClose size={18} />
             </NavbarIcon>

src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx

@@ -1,9 +1,9 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import { QuickPanelReservedSymbol, useQuickPanel } from '@renderer/components/QuickPanel'
 import { useKnowledgeBases } from '@renderer/hooks/useKnowledge'
 import type { FileType, KnowledgeBase, KnowledgeItem } from '@renderer/types'
 import { filterSupportedFiles, formatFileSize } from '@renderer/utils/file'
-import { Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { FileSearch, FileText, Paperclip, Upload } from 'lucide-react'
 import type { Dispatch, FC, SetStateAction } from 'react'
@@ -144,10 +144,8 @@ const AttachmentButton: FC<Props> = ({ ref, couldAddImageFile, extensions, files
 
   return (
     <Tooltip
-      placement="top"
+      content={couldAddImageFile ? t('chat.input.upload.image_or_document') : t('chat.input.upload.document')}
-      title={couldAddImageFile ? t('chat.input.upload.image_or_document') : t('chat.input.upload.document')}
+      closeDelay={0}>
-      mouseLeaveDelay={0}
-      arrow>
       <ActionIconButton
         onPress={openFileSelectDialog}
         active={files.length > 0}

src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx

@@ -13,12 +13,13 @@ import {
   LinkOutlined
 } from '@ant-design/icons'
 import { ColFlex } from '@cherrystudio/ui'
+import { Tooltip } from '@cherrystudio/ui'
 import CustomTag from '@renderer/components/Tags/CustomTag'
 import { useAttachment } from '@renderer/hooks/useAttachment'
 import FileManager from '@renderer/services/FileManager'
 import type { FileMetadata } from '@renderer/types'
 import { formatFileSize } from '@renderer/utils'
-import { Image, Tooltip } from 'antd'
+import { Image } from 'antd'
 import { isEmpty } from 'lodash'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -95,13 +96,10 @@ export const FileNameRender: FC<{ file: FileMetadata }> = ({ file }) => {
 
   return (
     <Tooltip
-      styles={{
+      classNames={{
-        body: {
+        content: 'p-1'
-          padding: 5
-        }
       }}
-      fresh
+      content={
-      title={
         <ColFlex className="items-center gap-0.5">
           {isImage(file.ext) && (
             <Image

src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx

@@ -1,7 +1,7 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import { isGenerateImageModel } from '@renderer/config/models'
 import type { Assistant, Model } from '@renderer/types'
-import { Tooltip } from 'antd'
 import { Image } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,12 +17,9 @@ const GenerateImageButton: FC<Props> = ({ model, assistant, onEnableGenerateImag
 
   return (
     <Tooltip
-      placement="top"
+      content={
-      title={
         isGenerateImageModel(model) ? t('chat.input.generate_image') : t('chat.input.generate_image_not_supported')
-      }
+      }>
-      mouseLeaveDelay={0}
-      arrow>
       <ActionIconButton
         onPress={onEnableGenerateImage}
         active={assistant.enableGenerateImage}

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -1,4 +1,5 @@
 import { HolderOutlined } from '@ant-design/icons'
+import { Tooltip } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
@@ -45,7 +46,6 @@ import {
 } from '@renderer/utils/input'
 import { documentExts, imageExts, textExts } from '@shared/config/constant'
 import { IpcChannel } from '@shared/IpcChannel'
-import { Tooltip } from 'antd'
 import type { TextAreaRef } from 'antd/es/input/TextArea'
 import TextArea from 'antd/es/input/TextArea'
 import { debounce, isEmpty } from 'lodash'
@@ -911,7 +911,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
               <TranslateButton text={text} onTranslated={onTranslated} isLoading={isTranslating} />
               <SendMessageButton sendMessage={sendMessage} disabled={inputEmpty} />
               {loading && (
-                <Tooltip placement="top" title={t('chat.input.pause')} mouseLeaveDelay={0} arrow>
+                <Tooltip content={t('chat.input.pause')} closeDelay={0}>
                   <ActionIconButton
                     onClick={onPause}
                     className="mr-[-2px]"

src/renderer/src/pages/home/Inputbar/InputbarTools.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@cherrystudio/ui'
 import type { DropResult } from '@hello-pangea/dnd'
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
 import { loggerService } from '@logger'
@@ -23,7 +24,7 @@ import type { FileType, KnowledgeBase, Model } from '@renderer/types'
 import { FileTypes } from '@renderer/types'
 import { classNames } from '@renderer/utils'
 import { isPromptToolUse, isSupportedToolUse } from '@renderer/utils/mcp-tools'
-import { Divider, Dropdown, Tooltip } from 'antd'
+import { Divider, Dropdown } from 'antd'
 import type { ItemType } from 'antd/es/menu/interface'
 import {
   AtSign,
@@ -354,11 +355,7 @@ const InputbarTools = ({
         key: 'new_topic',
         label: t('chat.input.new_topic', { Command: '' }),
         component: (
-          <Tooltip
+          <Tooltip content={t('chat.input.new_topic', { Command: newTopicShortcut })} closeDelay={0}>
-            placement="top"
-            title={t('chat.input.new_topic', { Command: newTopicShortcut })}
-            mouseLeaveDelay={0}
-            arrow>
             <ActionIconButton onPress={addNewTopic} icon={<MessageSquareDiff size={19} />} />
           </Tooltip>
         )
@@ -459,11 +456,7 @@ const InputbarTools = ({
         key: 'clear_topic',
         label: t('chat.input.clear.label', { Command: '' }),
         component: (
-          <Tooltip
+          <Tooltip content={t('chat.input.clear.label', { Command: clearTopicShortcut })} closeDelay={0} showArrow>
-            placement="top"
-            title={t('chat.input.clear.label', { Command: clearTopicShortcut })}
-            mouseLeaveDelay={0}
-            arrow>
             <ActionIconButton onPress={clearTopic} icon={<PaintbrushVertical size={18} />} />
           </Tooltip>
         )
@@ -472,11 +465,7 @@ const InputbarTools = ({
         key: 'toggle_expand',
         label: isExpended ? t('chat.input.collapse') : t('chat.input.expand'),
         component: (
-          <Tooltip
+          <Tooltip content={isExpended ? t('chat.input.collapse') : t('chat.input.expand')} closeDelay={0} showArrow>
-            placement="top"
-            title={isExpended ? t('chat.input.collapse') : t('chat.input.expand')}
-            mouseLeaveDelay={0}
-            arrow>
             <ActionIconButton
               onPress={onToggleExpended}
               icon={isExpended ? <Minimize size={18} /> : <Maximize size={18} />}
@@ -655,10 +644,7 @@ const InputbarTools = ({
         </DragDropContext>
 
         {showCollapseButton && (
-          <Tooltip
+          <Tooltip content={isCollapse ? t('chat.input.tools.expand') : t('chat.input.tools.collapse')} showArrow>
-            placement="top"
-            title={isCollapse ? t('chat.input.tools.expand') : t('chat.input.tools.collapse')}
-            arrow>
             <ActionIconButton
               onPress={() => dispatch(setIsCollapsed(!isCollapse))}
               icon={
@@ -715,9 +701,10 @@ const ToolWrapper = styled.div`
     width 0.2s,
     margin-right 0.2s,
     opacity 0.2s;
+
   &.is-collapsed {
-    width: 0px;
+    width: 0;
-    margin-right: 0px;
+    margin-right: 0;
     overflow: hidden;
     opacity: 0;
   }

src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx

@@ -1,9 +1,9 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import type { QuickPanelListItem } from '@renderer/components/QuickPanel'
 import { QuickPanelReservedSymbol, useQuickPanel } from '@renderer/components/QuickPanel'
 import { useAppSelector } from '@renderer/store'
 import type { KnowledgeBase } from '@renderer/types'
-import { Tooltip } from 'antd'
 import { CircleX, FileSearch, Plus } from 'lucide-react'
 import type { FC } from 'react'
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
@@ -108,7 +108,7 @@ const KnowledgeBaseButton: FC<Props> = ({ ref, selectedBases, onSelect, disabled
   }))
 
   return (
-    <Tooltip placement="top" title={t('chat.input.knowledge_base')} mouseLeaveDelay={0} arrow>
+    <Tooltip content={t('chat.input.knowledge_base')} closeDelay={0}>
       <ActionIconButton
         onPress={handleOpenQuickPanel}
         active={selectedBases && selectedBases.length > 0}

src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import type { QuickPanelListItem } from '@renderer/components/QuickPanel'
 import { QuickPanelReservedSymbol, useQuickPanel } from '@renderer/components/QuickPanel'
@@ -10,7 +11,7 @@ import { getProviderByModel } from '@renderer/services/AssistantService'
 import { EventEmitter } from '@renderer/services/EventService'
 import type { MCPPrompt, MCPResource, MCPServer } from '@renderer/types'
 import { isToolUseModeFunction } from '@renderer/utils/assistant'
-import { Form, Input, Tooltip } from 'antd'
+import { Form, Input } from 'antd'
 import { CircleX, Hammer, Plus } from 'lucide-react'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
@@ -487,7 +488,7 @@ const MCPToolsButton: FC<Props> = ({ ref, setInputValue, resizeTextArea, assista
   }))
 
   return (
-    <Tooltip placement="top" title={t('settings.mcp.title')} mouseLeaveDelay={0} arrow>
+    <Tooltip content={t('settings.mcp.title')} closeDelay={0}>
       <ActionIconButton
         onPress={handleOpenQuickPanel}
         active={assistant.mcpServers && assistant.mcpServers.length > 0}

src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx

@@ -1,4 +1,4 @@
-import { Avatar } from '@cherrystudio/ui'
+import { Avatar, Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import ModelTagsWithLabel from '@renderer/components/ModelTagsWithLabel'
 import { type QuickPanelListItem, QuickPanelReservedSymbol, useQuickPanel } from '@renderer/components/QuickPanel'
@@ -8,7 +8,6 @@ import { useProviders } from '@renderer/hooks/useProvider'
 import { getModelUniqId } from '@renderer/services/ModelService'
 import type { FileType, Model } from '@renderer/types'
 import { getFancyProviderName } from '@renderer/utils'
-import { Tooltip } from 'antd'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { first, sortBy } from 'lodash'
 import { AtSign, CircleX, Plus } from 'lucide-react'
@@ -136,7 +135,7 @@ const MentionModelsButton: FC<Props> = ({
             ),
             description: <ModelTagsWithLabel model={m} showLabel={false} size={10} style={{ opacity: 0.8 }} />,
             icon: (
-              <Avatar src={getModelLogo(m.id)} className="w-5 h-5">
+              <Avatar src={getModelLogo(m.id)} className="h-5 w-5">
                 {first(m.name)}
               </Avatar>
             ),
@@ -172,7 +171,7 @@ const MentionModelsButton: FC<Props> = ({
         ),
         description: <ModelTagsWithLabel model={m} showLabel={false} size={10} style={{ opacity: 0.8 }} />,
         icon: (
-          <Avatar src={getModelLogo(m.id)} className="w-5 h-5">
+          <Avatar src={getModelLogo(m.id)} className="h-5 w-5">
             {first(m.name)}
           </Avatar>
         ),
@@ -304,7 +303,7 @@ const MentionModelsButton: FC<Props> = ({
   }))
 
   return (
-    <Tooltip placement="top" title={t('agents.edit.model.select.title')} mouseLeaveDelay={0} arrow>
+    <Tooltip content={t('agents.edit.model.select.title')} closeDelay={0}>
       <ActionIconButton
         onPress={handleOpenQuickPanel}
         active={mentionedModels.length > 0}

src/renderer/src/pages/home/Inputbar/NewContextButton.tsx

@@ -1,6 +1,6 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import { useShortcut, useShortcutDisplay } from '@renderer/hooks/useShortcuts'
-import { Tooltip } from 'antd'
 import { Eraser } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -15,11 +15,7 @@ const NewContextButton: FC<Props> = ({ onNewContext }) => {
   useShortcut('toggle_new_context', onNewContext)
 
   return (
-    <Tooltip
+    <Tooltip content={t('chat.input.new.context', { Command: newContextShortcut })} closeDelay={0}>
-      placement="top"
-      title={t('chat.input.new.context', { Command: newContextShortcut })}
-      mouseLeaveDelay={0}
-      arrow>
       <ActionIconButton onPress={onNewContext} icon={<Eraser size={18} />} />
     </Tooltip>
   )

src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import {
   type QuickPanelListItem,
@@ -9,7 +10,7 @@ import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useTimer } from '@renderer/hooks/useTimer'
 import QuickPhraseService from '@renderer/services/QuickPhraseService'
 import type { QuickPhrase } from '@renderer/types'
-import { Input, Modal, Radio, Space, Tooltip } from 'antd'
+import { Input, Modal, Radio, Space } from 'antd'
 import { BotMessageSquare, Plus, Zap } from 'lucide-react'
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -156,7 +157,7 @@ const QuickPhrasesButton = ({ ref, setInputValue, resizeTextArea, assistantId }:
 
   return (
     <>
-      <Tooltip placement="top" title={t('settings.quickPhrase.title')} mouseLeaveDelay={0} arrow>
+      <Tooltip content={t('settings.quickPhrase.title')} closeDelay={0}>
         <ActionIconButton onPress={handleOpenQuickPanel} icon={<Zap size={18} />} />
       </Tooltip>
 

src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import {
   MdiLightbulbAutoOutline,
@@ -18,7 +19,6 @@ import {
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { getReasoningEffortOptionsLabel } from '@renderer/i18n/label'
 import type { Model, ThinkingOption } from '@renderer/types'
-import { Tooltip } from 'antd'
 import type { FC, ReactElement } from 'react'
 import { useCallback, useImperativeHandle, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -132,14 +132,12 @@ const ThinkingButton: FC<Props> = ({ ref, model, assistantId }): ReactElement =>
 
   return (
     <Tooltip
-      placement="top"
+      content={
-      title={
         isThinkingEnabled && supportedOptions.includes('off')
           ? t('common.close')
           : t('assistants.settings.reasoning_effort.label')
       }
-      mouseLeaveDelay={0}
+      closeDelay={0}>
-      arrow>
       <ActionIconButton
         onPress={handleOpenQuickPanel}
         active={currentReasoningEffort !== 'off'}

src/renderer/src/pages/home/Inputbar/UrlContextbutton.tsx

@@ -1,8 +1,8 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useTimer } from '@renderer/hooks/useTimer'
 import { isToolUseModeFunction } from '@renderer/utils/assistant'
-import { Tooltip } from 'antd'
 import { Link } from 'lucide-react'
 import type { FC } from 'react'
 import { memo, useCallback } from 'react'
@@ -47,7 +47,7 @@ const UrlContextButton: FC<Props> = ({ assistantId }) => {
   }, [setTimeoutTimer, assistant, urlContentNewState, updateAssistant, t])
 
   return (
-    <Tooltip placement="top" title={t('chat.input.url_context')} arrow>
+    <Tooltip content={t('chat.input.url_context')}>
       <ActionIconButton onPress={handleToggle} active={assistant.enableUrlContext} icon={<Link size={18} />} />
     </Tooltip>
   )

src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx

@@ -1,4 +1,5 @@
 import { BaiduOutlined, GoogleOutlined } from '@ant-design/icons'
+import { Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { ActionIconButton } from '@renderer/components/Buttons'
 import { BingLogo, BochaLogo, ExaLogo, SearXNGLogo, TavilyLogo, ZhipuLogo } from '@renderer/components/Icons'
@@ -19,7 +20,6 @@ import WebSearchService from '@renderer/services/WebSearchService'
 import type { WebSearchProvider, WebSearchProviderId } from '@renderer/types'
 import { hasObjectKey } from '@renderer/utils'
 import { isToolUseModeFunction } from '@renderer/utils/assistant'
-import { Tooltip } from 'antd'
 import { Globe } from 'lucide-react'
 import type { FC } from 'react'
 import { memo, useCallback, useImperativeHandle, useMemo } from 'react'
@@ -207,11 +207,7 @@ const WebSearchButton: FC<Props> = ({ ref, assistantId }) => {
   }))
 
   return (
-    <Tooltip
+    <Tooltip content={enableWebSearch ? t('common.close') : t('chat.input.web_search.label')} closeDelay={0}>
-      placement="top"
-      title={enableWebSearch ? t('common.close') : t('chat.input.web_search.label')}
-      mouseLeaveDelay={0}
-      arrow>
       <ActionIconButton
         onPress={onClick}
         active={!!enableWebSearch}

src/renderer/src/pages/home/Markdown/CitationTooltip.tsx

@@ -1,5 +1,5 @@
+import { Tooltip } from '@cherrystudio/ui'
 import Favicon from '@renderer/components/Icons/FallbackFavicon'
-import { Tooltip } from 'antd'
 import React, { memo, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import { z } from 'zod'
@@ -57,17 +57,9 @@ const CitationTooltip: React.FC<CitationTooltipProps> = ({ children, citation })
 
   return (
     <Tooltip
-      arrow={false}
+      content={tooltipContent}
-      overlay={tooltipContent}
+      showArrow={false}
-      placement="top"
+      className="rounded-[8px] border border-[var(--color-border)] bg-[var(--color-background)] p-3">
-      color="var(--color-background)"
-      styles={{
-        body: {
-          border: '1px solid var(--color-border)',
-          padding: '12px',
-          borderRadius: '8px'
-        }
-      }}>
       {children}
     </Tooltip>
   )

src/renderer/src/pages/home/Markdown/Hyperlink.tsx

@@ -26,7 +26,6 @@ const Hyperlink: React.FC<HyperLinkProps> = ({ children, href }) => {
       open={open}
       onOpenChange={setOpen}
       content={<OGCard link={link} show={open} />}
-      placement="top"
       styles={{
         body: {
           padding: 0,

src/renderer/src/pages/home/Markdown/Table.tsx

@@ -1,8 +1,8 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { CopyIcon } from '@renderer/components/Icons'
 import { useTemporaryValue } from '@renderer/hooks/useTemporaryValue'
 import store from '@renderer/store'
 import { messageBlocksSelectors } from '@renderer/store/messageBlock'
-import { Tooltip } from 'antd'
 import { Check } from 'lucide-react'
 import React, { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -40,7 +40,7 @@ const Table: React.FC<Props> = ({ children, node, blockId }) => {
     <TableWrapper className="table-wrapper">
       <table>{children}</table>
       <ToolbarWrapper className="table-toolbar">
-        <Tooltip title={t('common.copy')} mouseEnterDelay={0.8}>
+        <Tooltip content={t('common.copy')} delay={800}>
           <ToolButton role="button" aria-label={t('common.copy')} onClick={handleCopyTable}>
             {copied ? <Check size={14} color="var(--color-primary)" /> : <CopyIcon size={14} />}
           </ToolButton>

src/renderer/src/pages/home/Markdown/__tests__/CitationTooltip.test.tsx

@@ -12,20 +12,17 @@ vi.mock('@renderer/components/Icons/FallbackFavicon', () => ({
   default: (props: any) => <div data-testid="mock-favicon" {...props} />
 }))
 
-vi.mock('antd', () => ({
+const uiMocks = vi.hoisted(() => ({
-  Tooltip: ({ children, overlay, title, placement, color, styles, ...props }: any) => (
+  Tooltip: vi.fn(({ children, title, content, placement, ...props }: any) => (
-    <div
+    <div data-testid="tooltip-wrapper" data-placement={placement} {...props}>
-      data-testid="tooltip-wrapper"
-      data-placement={placement}
-      data-color={color}
-      data-styles={JSON.stringify(styles)}
-      {...props}>
       {children}
-      <div data-testid="tooltip-content">{overlay || title}</div>
+      <div data-testid="tooltip-content">{content || title}</div>
     </div>
-  )
+  ))
 }))
 
+vi.mock('@cherrystudio/ui', () => uiMocks)
+
 const originalWindowOpen = window.open
 
 describe('CitationTooltip', () => {
@@ -87,22 +84,6 @@ describe('CitationTooltip', () => {
       expect(favicon).toHaveAttribute('alt', 'Example Title')
     })
 
-    it('should pass correct props to Tooltip component', () => {
-      const citation = createCitationData()
-      renderCitationTooltip(citation)
-
-      const tooltip = screen.getByTestId('tooltip-wrapper')
-      expect(tooltip).toHaveAttribute('data-placement', 'top')
-      expect(tooltip).toHaveAttribute('data-color', 'var(--color-background)')
-
-      const styles = JSON.parse(tooltip.getAttribute('data-styles') || '{}')
-      expect(styles.body).toEqual({
-        border: '1px solid var(--color-border)',
-        padding: '12px',
-        borderRadius: '8px'
-      })
-    })
-
     it('should match snapshot', () => {
       const citation = createCitationData()
       const { container } = render(

src/renderer/src/pages/home/Markdown/__tests__/Hyperlink.test.tsx

@@ -102,7 +102,6 @@ describe('Hyperlink', () => {
     const popover = screen.getByTestId('popover')
     expect(popover).toBeInTheDocument()
     expect(popover).toHaveAttribute('data-arrow', 'false')
-    expect(popover).toHaveAttribute('data-placement', 'top')
 
     // Content includes decoded url text and favicon with hostname
     expect(screen.getByTestId('favicon')).toHaveAttribute('data-hostname', 'domain.com')

src/renderer/src/pages/home/Markdown/__tests__/Table.test.tsx

@@ -33,7 +33,10 @@ vi.mock('@renderer/components/Icons', () => ({
 }))
 
 vi.mock('lucide-react', () => ({
-  Check: ({ size }: { size: number }) => <div data-testid="check-icon" style={{ width: size, height: size }} />
+  Check: ({ size }: { size: number }) => <div data-testid="check-icon" style={{ width: size, height: size }} />,
+  CheckIcon: ({ size }: { size: number }) => <div data-testid="check-icon" style={{ width: size, height: size }} />,
+  CircleXIcon: () => <span>error</span>,
+  AlertTriangleIcon: () => <span>alert</span>
 }))
 
 vi.mock('react-i18next', () => ({
@@ -42,9 +45,9 @@ vi.mock('react-i18next', () => ({
   })
 }))
 
-vi.mock('antd', () => ({
+vi.mock('@cherrystudio/ui', () => ({
-  Tooltip: ({ children, title }: any) => (
+  Tooltip: ({ children, title, content }: any) => (
-    <div data-testid="tooltip" title={title}>
+    <div data-testid="tooltip" title={content || title}>
       {children}
     </div>
   )

src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/CitationTooltip.test.tsx.snap

@@ -47,9 +47,7 @@ exports[`CitationTooltip > basic rendering > should match snapshot 1`] = `
 }
 
 <div
-  data-color="var(--color-background)"
+  class="rounded-[8px] border border-[var(--color-border)] bg-[var(--color-background)] p-3"
-  data-placement="top"
-  data-styles="{"body":{"border":"1px solid var(--color-border)","padding":"12px","borderRadius":"8px"}}"
   data-testid="tooltip-wrapper"
 >
   <span>

src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/Hyperlink.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`Hyperlink > should match snapshot for normal url 1`] = `
 <div>
   <div
     data-arrow="false"
-    data-placement="top"
     data-styles="{"body":{"padding":0,"borderRadius":"8px","overflow":"hidden"}}"
     data-testid="popover"
   >

src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx

@@ -1,10 +1,11 @@
 import { CheckOutlined } from '@ant-design/icons'
+import { Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import ThinkingEffect from '@renderer/components/ThinkingEffect'
 import { useTemporaryValue } from '@renderer/hooks/useTemporaryValue'
 import { MessageBlockStatus, type ThinkingMessageBlock } from '@renderer/types/newMessage'
-import { Collapse, Tooltip } from 'antd'
+import { Collapse } from 'antd'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -81,7 +82,7 @@ const ThinkingBlock: React.FC<Props> = ({ block }) => {
                 fontSize
               }}>
               {!isThinking && (
-                <Tooltip title={t('common.copy')} mouseEnterDelay={0.8}>
+                <Tooltip content={t('common.copy')} delay={800}>
                   <ActionButton
                     className="message-action-button"
                     onClick={(e) => {

src/renderer/src/pages/home/Messages/Blocks/__tests__/ThinkingBlock.test.tsx

@@ -42,17 +42,20 @@ vi.mock('antd', () => ({
       ))}
     </div>
   ),
-  Tooltip: ({ title, children, mouseEnterDelay }: any) => (
-    <div data-testid="tooltip" title={title} data-mouse-enter-delay={mouseEnterDelay}>
-      {children}
-    </div>
-  ),
   message: {
     success: vi.fn(),
     error: vi.fn()
   }
 }))
 
+vi.mock('@cherrystudio/ui', () => ({
+  Tooltip: ({ title, children, mouseEnterDelay }: any) => (
+    <div data-testid="tooltip" title={title} data-mouse-enter-delay={mouseEnterDelay}>
+      {children}
+    </div>
+  )
+}))
+
 // Mock icons
 vi.mock('@ant-design/icons', () => ({
   CheckOutlined: ({ style }: any) => (
@@ -68,7 +71,10 @@ vi.mock('lucide-react', () => ({
       💡
     </span>
   ),
-  ChevronRight: (props: any) => <svg data-testid="chevron-right-icon" {...props} />
+  ChevronRight: (props: any) => <svg data-testid="chevron-right-icon" {...props} />,
+  CheckIcon: () => <span>check</span>,
+  CircleXIcon: () => <span>error</span>,
+  AlertTriangleIcon: () => <span>alert</span>
 }))
 
 // Mock motion

src/renderer/src/pages/home/Messages/Blocks/__tests__/__snapshots__/ThinkingBlock.test.tsx.snap

@@ -85,9 +85,7 @@ exports[`ThinkingBlock > basic rendering > should match snapshot 1`] = `
         style="font-family: var(--font-family); font-size: 14px;"
       >
         <div
-          data-mouse-enter-delay="0.8"
           data-testid="tooltip"
-          title="Copy"
         >
           <button
             aria-label="Copy"

src/renderer/src/pages/home/Messages/ChatFlowHistory.tsx

@@ -1,8 +1,7 @@
 import '@xyflow/react/dist/style.css'
 
 import { RobotOutlined, UserOutlined } from '@ant-design/icons'
-import { Avatar } from '@cherrystudio/ui'
+import { Avatar, EmojiAvatar, Tooltip } from '@cherrystudio/ui'
-import { EmojiAvatar } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import { getModelLogo } from '@renderer/config/models'
@@ -18,7 +17,7 @@ import { getMainTextContent } from '@renderer/utils/messageUtils/find'
 import type { Edge, Node, NodeTypes } from '@xyflow/react'
 import { Controls, Handle, MiniMap, ReactFlow, ReactFlowProvider } from '@xyflow/react'
 import { Position, useEdgesState, useNodesState } from '@xyflow/react'
-import { Spin, Tooltip } from 'antd'
+import { Spin } from 'antd'
 import { isEqual } from 'lodash'
 import type { FC } from 'react'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
@@ -91,13 +90,7 @@ const CustomNode: FC<{ data: any }> = ({ data }) => {
       avatar = <ModelAvatar model={data.modelInfo} size={32} />
     } else if (data.modelId) {
       const modelLogo = getModelLogo(data.modelId)
-      avatar = (
+      avatar = <Avatar src={modelLogo} icon={!modelLogo ? <RobotOutlined /> : undefined} className="bg-primary" />
-        <Avatar
-          src={modelLogo}
-          icon={!modelLogo ? <RobotOutlined /> : undefined}
-          className="bg-primary"
-        />
-      )
     } else {
       avatar = <Avatar icon={<RobotOutlined />} className="bg-primary" />
     }
@@ -141,18 +134,16 @@ const CustomNode: FC<{ data: any }> = ({ data }) => {
 
   return (
     <Tooltip
-      title={
+      content={
         <TooltipContent>
           <TooltipTitle>{title}</TooltipTitle>
           <TooltipBody>{data.content}</TooltipBody>
           <TooltipFooter>{t('chat.history.click_to_navigate')}</TooltipFooter>
         </TooltipContent>
       }
-      placement="top"
+      classNames={{ content: 'bg-[#000000d8] text-gray-200 text-sm' }}
-      color="rgba(0, 0, 0, 0.85)"
+      delay={300}
-      mouseEnterDelay={0.3}
+      closeDelay={100}>
-      mouseLeaveDelay={0.1}
-      destroyOnHidden>
       <CustomNodeContainer
         style={{
           borderColor,

src/renderer/src/pages/home/Messages/ChatNavigation.tsx

@@ -6,11 +6,11 @@ import {
   VerticalAlignBottomOutlined,
   VerticalAlignTopOutlined
 } from '@ant-design/icons'
-// import { selectCurrentTopicId } from '@renderer/store/newMessage'
+import { Button, Tooltip } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import type { RootState } from '@renderer/store'
-import { Drawer, Tooltip } from 'antd'
+// import { selectCurrentTopicId } from '@renderer/store/newMessage'
+import { Drawer } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -337,7 +337,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
     <>
       <NavigationContainer $isVisible={isVisible} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
         <ButtonGroup>
-          <Tooltip title={t('chat.navigation.close')} placement="left" mouseEnterDelay={0.5}>
+          <Tooltip placement="left" content={t('chat.navigation.close')} delay={500}>
             <NavigationButton
               variant="light"
               startContent={<CloseOutlined />}
@@ -346,7 +346,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
             />
           </Tooltip>
           <Divider />
-          <Tooltip title={t('chat.navigation.top')} placement="left" mouseEnterDelay={0.5}>
+          <Tooltip placement="left" content={t('chat.navigation.top')} delay={500}>
             <NavigationButton
               variant="light"
               startContent={<VerticalAlignTopOutlined />}
@@ -355,7 +355,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
             />
           </Tooltip>
           <Divider />
-          <Tooltip title={t('chat.navigation.prev')} placement="left" mouseEnterDelay={0.5}>
+          <Tooltip placement="left" content={t('chat.navigation.prev')} delay={500}>
             <NavigationButton
               variant="light"
               startContent={<ArrowUpOutlined />}
@@ -364,7 +364,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
             />
           </Tooltip>
           <Divider />
-          <Tooltip title={t('chat.navigation.next')} placement="left" mouseEnterDelay={0.5}>
+          <Tooltip placement="left" content={t('chat.navigation.next')} delay={500}>
             <NavigationButton
               variant="light"
               startContent={<ArrowDownOutlined />}
@@ -373,7 +373,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
             />
           </Tooltip>
           <Divider />
-          <Tooltip title={t('chat.navigation.bottom')} placement="left" mouseEnterDelay={0.5}>
+          <Tooltip placement="left" content={t('chat.navigation.bottom')} delay={500}>
             <NavigationButton
               variant="light"
               startContent={<VerticalAlignBottomOutlined />}
@@ -382,7 +382,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
             />
           </Tooltip>
           <Divider />
-          <Tooltip title={t('chat.navigation.history')} placement="left" mouseEnterDelay={0.5}>
+          <Tooltip placement="left" content={t('chat.navigation.history')} delay={500}>
             <NavigationButton
               variant="light"
               startContent={<HistoryOutlined />}

src/renderer/src/pages/home/Messages/MessageEditor.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import { ActionIconButton } from '@renderer/components/Buttons'
@@ -19,7 +20,7 @@ import { getFilesFromDropEvent, isSendMessageKeyPressed } from '@renderer/utils/
 import { createFileBlock, createImageBlock } from '@renderer/utils/messageUtils/create'
 import { findAllBlocks } from '@renderer/utils/messageUtils/find'
 import { documentExts, imageExts, textExts } from '@shared/config/constant'
-import { Space, Tooltip } from 'antd'
+import { Space } from 'antd'
 import type { TextAreaRef } from 'antd/es/input/TextArea'
 import TextArea from 'antd/es/input/TextArea'
 import { Save, Send, X } from 'lucide-react'
@@ -359,14 +360,14 @@ const MessageBlockEditor: FC<Props> = ({ message, topicId, onSave, onResend, onC
         </ActionBarLeft>
         <ActionBarMiddle />
         <ActionBarRight>
-          <Tooltip title={t('common.cancel')}>
+          <Tooltip content={t('common.cancel')}>
             <ActionIconButton onPress={onCancel} icon={<X size={16} />} />
           </Tooltip>
-          <Tooltip title={t('common.save')}>
+          <Tooltip content={t('common.save')}>
             <ActionIconButton onPress={handleSave} icon={<Save size={16} />} />
           </Tooltip>
           {message.role === 'user' && (
-            <Tooltip title={t('chat.resend')}>
+            <Tooltip content={t('chat.resend')}>
               <ActionIconButton onPress={handleResend} icon={<Send size={16} />} />
             </Tooltip>
           )}

src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx

@@ -7,7 +7,7 @@ import {
   ReloadOutlined
 } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useMessageOperations } from '@renderer/hooks/useMessageOperations'
 import type { Topic } from '@renderer/types'
@@ -15,7 +15,6 @@ import type { Message } from '@renderer/types/newMessage'
 import { AssistantMessageStatus } from '@renderer/types/newMessage'
 import { getMainTextContent } from '@renderer/utils/messageUtils/find'
 import type { MultiModelMessageStyle } from '@shared/data/preference/preferenceTypes'
-import { Tooltip } from 'antd'
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -107,9 +106,11 @@ const MessageGroupMenuBar: FC<Props> = ({
         <LayoutContainer>
           {(['fold', 'vertical', 'horizontal', 'grid'] as const).map((layout) => (
             <Tooltip
-              mouseEnterDelay={0.5}
+              delay={500}
               key={layout}
-              title={t('message.message.multi_model_style.label') + ': ' + multiModelMessageStyleTextByLayout[layout]}>
+              content={
+                t('message.message.multi_model_style.label') + ': ' + multiModelMessageStyleTextByLayout[layout]
+              }>
               <LayoutOption
                 $active={multiModelMessageStyle === layout}
                 onClick={() => setMultiModelMessageStyle(layout)}>
@@ -136,7 +137,7 @@ const MessageGroupMenuBar: FC<Props> = ({
         {multiModelMessageStyle === 'grid' && <MessageGroupSettings />}
       </RowFlex>
       {hasFailedMessages && (
-        <Tooltip title={t('message.group.retry_failed')} mouseEnterDelay={0.6}>
+        <Tooltip content={t('message.group.retry_failed')} delay={600}>
           <Button
             variant="light"
             size="sm"