feat: replace with simplified Tooltip

web/src/app/_components/image.tsx

@@ -1,12 +1,12 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { memo, useCallback, useEffect, useState } from "react";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import { cn } from "~/lib/utils";
 
+import { Tooltip } from "./tooltip";
+
 function Image({
   className,
   imageClassName,
@@ -47,8 +47,7 @@ function Image({
       {isError ? (
         fallback
       ) : (
-        <Tooltip>
+        <Tooltip title={alt ?? "No caption"}>
-          <TooltipTrigger asChild>
           <img
             className={cn(
               "size-full object-cover",
@@ -60,10 +59,6 @@ function Image({
             onLoad={handleLoad}
             onError={handleError}
           />
-          </TooltipTrigger>
-          <TooltipContent>
-            <p className="max-w-64 text-sm">{alt ?? "No caption"}</p>
-          </TooltipContent>
         </Tooltip>
       )}
     </span>

web/src/app/_components/input-box.tsx

@@ -12,14 +12,11 @@ import {
 } from "react";
 
 import { Button } from "~/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import type { Option } from "~/core/messages";
 import { cn } from "~/lib/utils";
 
+import { Tooltip } from "./tooltip";
+
 export function InputBox({
   className,
   size,
@@ -139,8 +136,7 @@ export function InputBox({
       <div className="flex items-center px-4 py-2">
         <div className="flex grow"></div>
         <div className="flex shrink-0 items-center gap-2">
-          <Tooltip>
+          <Tooltip title={responding ? "Stop" : "Send"}>
-            <TooltipTrigger asChild>
             <Button
               variant="outline"
               size="icon"
@@ -155,10 +151,6 @@ export function InputBox({
                 <ArrowUpOutlined />
               )}
             </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{responding ? "Stop" : "Send"}</p>
-            </TooltipContent>
           </Tooltip>
         </div>
       </div>

web/src/app/_components/markdown.tsx

@@ -12,15 +12,11 @@ import remarkMath from "remark-math";
 import "katex/dist/katex.min.css";
 
 import { Button } from "~/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import { rehypeSplitWordsIntoSpans } from "~/core/rehype";
 import { cn } from "~/lib/utils";
 
 import Image from "./image";
+import { Tooltip } from "./tooltip";
 
 export function Markdown({
   className,
@@ -77,8 +73,7 @@ export function Markdown({
 function CopyButton({ content }: { content: string }) {
   const [copied, setCopied] = useState(false);
   return (
-    <Tooltip>
+    <Tooltip title="Copy">
-      <TooltipTrigger asChild>
       <Button
         variant="outline"
         size="sm"
@@ -101,10 +96,6 @@ function CopyButton({ content }: { content: string }) {
           <CopyOutlined className="h-4 w-4" />
         )}{" "}
       </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Copy</p>
-      </TooltipContent>
     </Tooltip>
   );
 }

web/src/app/_components/message-list-view.tsx

@@ -18,11 +18,6 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import type { Message, Option } from "~/core/messages";
 import {
   openResearch,
@@ -38,6 +33,7 @@ import { Markdown } from "./markdown";
 import { RainbowText } from "./rainbow-text";
 import { RollingText } from "./rolling-text";
 import { ScrollContainer } from "./scroll-container";
+import { Tooltip } from "./tooltip";
 
 export function MessageListView({
   className,
@@ -398,8 +394,7 @@ function PodcastCard({
           </div>
           {!isGenerating && (
             <div className="flex">
-              <Tooltip>
+              <Tooltip title="Download podcast">
-                <TooltipTrigger asChild>
                 <Button variant="ghost" size="icon" asChild>
                   <a
                     href={audioUrl}
@@ -408,8 +403,6 @@ function PodcastCard({
                     <DownloadOutlined />
                   </a>
                 </Button>
-                </TooltipTrigger>
-                <TooltipContent>Download podcast</TooltipContent>
               </Tooltip>
             </div>
           )}

web/src/app/_components/research-block.tsx

@@ -7,17 +7,13 @@ import { useEffect, useState } from "react";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import { openResearch, useStore } from "~/core/store";
 import { cn } from "~/lib/utils";
 
 import { ResearchActivitiesBlock } from "./research-activities-block";
 import { ResearchReportBlock } from "./research-report-block";
 import { ScrollContainer } from "./scroll-container";
+import { Tooltip } from "./tooltip";
 
 export function ResearchBlock({
   className,
@@ -43,8 +39,7 @@ export function ResearchBlock({
     <div className={cn("h-full w-full", className)}>
       <Card className={cn("relative h-full w-full pt-4", className)}>
         <div className="absolute right-4 flex h-9 items-center">
-          <Tooltip>
+          <Tooltip title="Close">
-            <TooltipTrigger asChild>
             <Button
               className="text-gray-400"
               size="sm"
@@ -55,8 +50,6 @@ export function ResearchBlock({
             >
               <CloseOutlined />
             </Button>
-            </TooltipTrigger>
-            <TooltipContent>Close</TooltipContent>
           </Tooltip>
         </div>
         <Tabs

web/src/app/_components/research-report-block.tsx

@@ -5,16 +5,12 @@ import { SoundOutlined } from "@ant-design/icons";
 import { useCallback, useRef, useState } from "react";
 
 import { Button } from "~/components/ui/button";
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from "~/components/ui/tooltip";
 import { listenToPodcast, useMessage } from "~/core/store";
 import { cn } from "~/lib/utils";
 
 import { LoadingAnimation } from "./loading-animation";
 import { Markdown } from "./markdown";
+import { Tooltip } from "./tooltip";
 
 export function ResearchReportBlock({
   className,
@@ -42,8 +38,11 @@ export function ResearchReportBlock({
     >
       <div className="absolute top-2 right-6">
         {message?.content && !message.isStreaming && (
-          <Tooltip>
+          <Tooltip
-            <TooltipTrigger asChild>
+            title={
+              isGenerated ? "The podcast is generated" : "Generate podcast"
+            }
+          >
             <Button
               variant="outline"
               size="icon"
@@ -54,12 +53,6 @@ export function ResearchReportBlock({
             >
               <SoundOutlined />
             </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                {isGenerated ? "The podcast is generated" : "Generate podcast"}
-              </p>
-            </TooltipContent>
           </Tooltip>
         )}
       </div>

web/src/app/_components/theme-toggle.tsx

@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 

web/src/app/_components/tooltip.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import {
+  Tooltip as ShadcnTooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+export function Tooltip({
+  className,
+  children,
+  title,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  title: React.ReactNode;
+}) {
+  return (
+    <ShadcnTooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent className={className}>{title}</TooltipContent>
+    </ShadcnTooltip>
+  );
+}