🤖 Continue Tooltip migration - ModelDisplay, VimTextArea, ConsumerBreakdown, VerticalTokenMeter

_Generated with `cmux`_

Author: kylecarbs

src/components/Messages/ModelDisplay.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import AnthropicIcon from "@/assets/icons/anthropic.svg?react";
 import OpenAIIcon from "@/assets/icons/openai.svg?react";
-import { TooltipWrapper, Tooltip } from "@/components/Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { formatModelDisplayName } from "@/utils/ai/modelDisplay";
 
 interface ModelDisplayProps {
@@ -56,11 +56,13 @@ export const ModelDisplay: React.FC<ModelDisplayProps> = ({ modelString, showToo
   }
 
   return (
-    <TooltipWrapper inline data-model-display-tooltip>
-      {content}
-      <Tooltip align="center" data-model-tooltip-text>
+    <Tooltip>
+      <TooltipTrigger asChild data-model-display-tooltip>
+        {content}
+      </TooltipTrigger>
+      <TooltipContent data-model-tooltip-text>
         {modelString}
-      </Tooltip>
-    </TooltipWrapper>
+      </TooltipContent>
+    </Tooltip>
   );
 };

src/components/RightSidebar/VerticalTokenMeter.tsx

@@ -36,14 +36,16 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
             className="flex w-full flex-1 flex-col items-center [&>*]:flex [&>*]:flex-1 [&>*]:flex-col"
             data-bar-wrapper="expand"
           >
-            <TooltipWrapper data-tooltip-wrapper="vertical-meter">
-              <TokenMeter
-                segments={data.segments}
-                orientation="vertical"
-                data-meter="token-bar"
-                data-segment-count={data.segments.length}
-              />
-              <Tooltip data-tooltip="meter-details">
+            <Tooltip>
+              <TooltipTrigger asChild data-tooltip-wrapper="vertical-meter">
+                <TokenMeter
+                  segments={data.segments}
+                  orientation="vertical"
+                  data-meter="token-bar"
+                  data-segment-count={data.segments.length}
+                />
+              </TooltipTrigger>
+              <TooltipContent data-tooltip="meter-details">
                 <div
                   className="font-primary flex flex-col gap-2 text-xs"
                   data-tooltip-content="usage-breakdown"
@@ -92,8 +94,8 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
                     💡 Expand your viewport to see full details
                   </div>
                 </div>
-              </Tooltip>
-            </TooltipWrapper>
+              </TooltipContent>
+            </Tooltip>
           </div>
         </div>
         <div

src/components/VimTextArea.tsx

@@ -162,9 +162,11 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
           <div className="flex items-center gap-1">
             {showVimMode && (
               <>
-                <TooltipWrapper>
-                  <HelpIndicator>?</HelpIndicator>
-                  <Tooltip align="left" width="wide">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <HelpIndicator>?</HelpIndicator>
+                  </TooltipTrigger>
+                  <TooltipContent side="left" className="max-w-md">
                     <strong>Vim Mode Enabled</strong>
                     <br />
                     <br />
@@ -183,8 +185,8 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
                       Vim Mode docs
                     </a>{" "}
                     for full command reference.
-                  </Tooltip>
-                </TooltipWrapper>
+                  </TooltipContent>
+                </Tooltip>
                 <span className="uppercase">normal</span>
                 {pendingCommand && <span>{pendingCommand}</span>}
               </>