refactor(web): align tooltip content class props (#35135)

web/app/components/app/overview/app-card-sections.tsx

@@ -75,12 +75,12 @@ const ACCESS_MODE_LABEL_MAP: Record<AccessMode, AccessModeLabelKey> = {
 const MaybeTooltip = ({
   children,
   content,
-  popupClassName,
+  tooltipClassName,
   show = true,
 }: {
   children: ReactNode
   content?: ReactNode
-  popupClassName?: string
+  tooltipClassName?: string
   show?: boolean
 }) => {
   if (!show || !content)
@@ -89,7 +89,7 @@ const MaybeTooltip = ({
   return (
     <Tooltip>
       <TooltipTrigger render={<div>{children}</div>} />
-      <TooltipContent popupClassName={popupClassName}>
+      <TooltipContent className={tooltipClassName}>
         {content}
       </TooltipContent>
     </Tooltip>
@@ -269,7 +269,7 @@ export const AppCardOperations = ({
       >
         <MaybeTooltip
           content={t('overview.appInfo.preUseReminder', { ns: 'appOverview' }) ?? ''}
-          popupClassName="mt-[-8px]"
+          tooltipClassName="mt-[-8px]"
           show={disabled}
         >
           <div className="flex items-center justify-center gap-px">

web/app/components/base/ui/tooltip/__tests__/index.spec.tsx

@@ -83,6 +83,26 @@ describe('TooltipContent', () => {
       expect(popup).toHaveAttribute('data-track-id', 'tooltip-track')
       expect(onMouseEnter).toHaveBeenCalledTimes(1)
     })
+
+    it('should apply className to the popup and positionerClassName to the positioner', () => {
+      render(
+        <Tooltip open>
+          <TooltipTrigger aria-label="tooltip trigger">Trigger</TooltipTrigger>
+          <TooltipContent
+            className="popup-class"
+            positionerClassName="positioner-class"
+            role="tooltip"
+            aria-label="styled tooltip"
+          >
+            Tooltip body
+          </TooltipContent>
+        </Tooltip>,
+      )
+
+      const popup = screen.getByRole('tooltip', { name: 'styled tooltip' })
+      expect(popup).toHaveClass('popup-class')
+      expect(popup.parentElement).toHaveClass('positioner-class')
+    })
   })
 })
 

web/app/components/base/ui/tooltip/index.tsx

@@ -13,8 +13,8 @@ type TooltipContentProps = {
   placement?: Placement
   sideOffset?: number
   alignOffset?: number
+  positionerClassName?: string
   className?: string
-  popupClassName?: string
   variant?: TooltipContentVariant
 } & Omit<React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup>, 'children' | 'className'>
 
@@ -23,8 +23,8 @@ export function TooltipContent({
   placement = 'top',
   sideOffset = 8,
   alignOffset = 0,
+  positionerClassName,
   className,
-  popupClassName,
   variant = 'default',
   ...props
 }: TooltipContentProps) {
@@ -37,13 +37,13 @@ export function TooltipContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-1002 outline-hidden', className)}
+        className={cn('z-1002 outline-hidden', positionerClassName)}
       >
         <BaseTooltip.Popup
           className={cn(
             variant === 'default' && 'max-w-[300px] rounded-md bg-components-panel-bg px-3 py-2 text-left system-xs-regular wrap-break-word text-text-tertiary shadow-lg',
             'origin-(--transform-origin) transition-opacity data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0 motion-reduce:transition-none',
-            popupClassName,
+            className,
           )}
           {...props}
         >

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

@@ -354,7 +354,7 @@ function ParameterItem({
                     </span>
                   )}
                 />
-                <TooltipContent popupClassName="mr-1">
+                <TooltipContent className="mr-1">
                   <div className="w-[150px] whitespace-pre-wrap">{parameterRule.help[language] || parameterRule.help.en_US}</div>
                 </TooltipContent>
               </Tooltip>

web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx

@@ -200,7 +200,7 @@ const PopupItem: FC<PopupItemProps> = ({
           <TooltipContent
             placement="right"
             variant="plain"
-            popupClassName="w-[206px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 backdrop-blur-xs"
+            className="w-[206px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 backdrop-blur-xs"
           >
             <div className="flex flex-col gap-1">
               <div className="flex flex-col items-start gap-2">

web/app/components/workflow/nodes/_base/node-sections.tsx

@@ -29,7 +29,7 @@ export const NodeHeaderMeta = ({
               {t('nodes.iteration.parallelModeUpper', { ns: 'workflow' })}
             </div>
           </TooltipTrigger>
-          <TooltipContent popupClassName="w-[180px]">
+          <TooltipContent className="w-[180px]">
             <div className="font-extrabold">
               {t('nodes.iteration.parallelModeEnableTitle', { ns: 'workflow' })}
             </div>