fix(ui): align tooltip surfaces with design tokens (#42661)

packages/dify-ui/src/kbd/index.stories.tsx

@@ -176,7 +176,7 @@ export const InTooltip: Story = {
         }
       />
       <TooltipContent className="flex items-center gap-1">
-        <span>Collapse sidebar</span>
+        <span className="px-0.5">Collapse sidebar</span>
         <HotkeyKbdGroup hotkey="Mod+B" />
       </TooltipContent>
     </Tooltip>

packages/dify-ui/src/kbd/index.tsx

@@ -6,7 +6,7 @@ import { cva } from 'class-variance-authority'
 import { cn } from '../cn'
 
 const kbdVariants = cva(
-  'pointer-events-none inline-flex h-4 min-w-4 items-center justify-center rounded-sm px-px font-sans system-kbd capitalize not-italic select-none',
+  'pointer-events-none inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-sm px-px font-sans system-kbd capitalize not-italic select-none',
   {
     variants: {
       color: {
@@ -43,7 +43,10 @@ type KbdGroupProps = React.ComponentProps<'span'>
 
 function KbdGroup({ className, ...props }: KbdGroupProps) {
   return (
-    <span className={cn('inline-flex items-center gap-0.5 align-middle', className)} {...props} />
+    <span
+      className={cn('inline-flex shrink-0 items-center gap-0.5 align-middle', className)}
+      {...props}
+    />
   )
 }
 

packages/dify-ui/src/tooltip/index.tsx

@@ -62,7 +62,7 @@ function TooltipContent({
         <BaseTooltip.Popup
           className={(state) =>
             cn(
-              'max-w-75 rounded-md bg-components-panel-bg px-3 py-2 text-start system-xs-regular wrap-break-word text-text-tertiary shadow-lg',
+              'max-w-75 overflow-clip rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 text-start system-xs-medium wrap-break-word text-text-secondary shadow-[0px_12px_16px_-4px_var(--color-shadow-shadow-5),0px_4px_6px_-2px_var(--color-shadow-shadow-1)] backdrop-blur-[5px]',
               'origin-(--transform-origin) transition-opacity data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0 motion-reduce:transition-none',
               resolveClassName(className, state),
             )

web/app/components/app-sidebar/app-detail-top.tsx

@@ -87,10 +87,7 @@ export function AppDetailTop({ expand = true, onToggle }: AppDetailTopProps) {
               />
             }
           />
-          <TooltipContent
-            placement="bottom"
-            className="flex items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 system-xs-medium text-text-secondary shadow-lg backdrop-blur-[5px]"
-          >
+          <TooltipContent placement="bottom" className="flex items-center gap-1">
             <span className="px-0.5">{t(($) => $['gotoAnything.quickAction'], { ns: 'app' })}</span>
             <KbdGroup>
               {GOTO_ANYTHING_HOTKEY.split('+').map((key) => (

web/app/components/app-sidebar/dataset-detail-top.tsx

@@ -87,10 +87,7 @@ export function DatasetDetailTop({ expand = true, onToggle }: DatasetDetailTopPr
               />
             }
           />
-          <TooltipContent
-            placement="bottom"
-            className="flex items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 system-xs-medium text-text-secondary shadow-lg backdrop-blur-[5px]"
-          >
+          <TooltipContent placement="bottom" className="flex items-center gap-1">
             <span className="px-0.5">{t(($) => $['gotoAnything.quickAction'], { ns: 'app' })}</span>
             <KbdGroup>
               {GOTO_ANYTHING_HOTKEY.split('+').map((key) => (

web/app/components/app/configuration/config-var/config-modal/form-fields.tsx

@@ -409,7 +409,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
             </span>
           </label>
           <div className="flex items-center gap-1">
-            <Infotip aria-label={hiddenDescriptionAriaLabel} popupClassName="max-w-[300px]">
+            <Infotip aria-label={hiddenDescriptionAriaLabel}>
               <Trans
                 i18nKey={($) => $['variableConfig.hiddenDescription']}
                 ns="appDebug"

web/app/components/app/workflow-log/detail.tsx

@@ -52,7 +52,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
                 </button>
               }
             />
-            <TooltipContent className="rounded-xl">
+            <TooltipContent>
               {t(($) => $['runDetail.testWithParams'], { ns: 'appLog' })}
             </TooltipContent>
           </Tooltip>

web/app/components/base/chat/chat/chat-input-area/index.tsx

@@ -383,7 +383,7 @@ const ChatInputArea = ({
                 aria-label={footerNoticeAriaLabel}
                 className="ml-auto size-5 rounded-md text-text-accent hover:bg-state-base-hover hover:text-text-accent"
                 iconVariant="information"
-                popupClassName="max-w-80 border-0 text-start wrap-break-word"
+                popupClassName="max-w-80 text-start wrap-break-word"
               >
                 {footerNoticeTooltip}
               </Infotip>

web/app/components/base/chat/chat/citation/progress-tooltip.tsx

@@ -27,7 +27,7 @@ const ProgressTooltip: FC<ProgressTooltipProps> = ({ data }) => {
       <TooltipContent
         data-testid="progress-tooltip-popup"
         placement="top-start"
-        className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg"
+        className="p-3 text-text-quaternary"
       >
         {t(($) => $['chat.citation.hitScore'], { ns: 'common' })} {data}
       </TooltipContent>

web/app/components/base/chat/chat/citation/tooltip.tsx

@@ -21,7 +21,7 @@ const CitationTooltip: FC<CitationTooltipProps> = ({ data, text, icon }) => {
       <TooltipContent
         data-testid="tooltip-popup"
         placement="top-start"
-        className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg"
+        className="p-3 text-text-quaternary"
       >
         {text} {data}
       </TooltipContent>

web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx

@@ -12,10 +12,7 @@ export const Item: FC<{ title: string; tooltip: string; children: React.JSX.Elem
     <div>
       <div className="mb-1 flex items-center space-x-1">
         <div className="py-1 system-sm-semibold text-text-secondary">{title}</div>
-        <Infotip
-          aria-label={tooltip}
-          popupClassName="max-w-[200px] system-sm-regular text-text-secondary"
-        >
+        <Infotip aria-label={tooltip} popupClassName="max-w-[200px] system-sm-regular">
           {tooltip}
         </Infotip>
       </div>

web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx

@@ -152,7 +152,7 @@ const OpeningSettingModal = ({
                 ns: 'appDebug',
               })}
               className="size-3.5"
-              popupClassName="max-w-[220px] system-sm-regular text-text-secondary"
+              popupClassName="max-w-[220px] system-sm-regular"
             >
               {t(($) => $['openingStatement.openingQuestionDescription'], { ns: 'appDebug' })}
             </Infotip>

web/app/components/base/file-thumb/index.tsx

@@ -71,12 +71,7 @@ const FileThumb = ({ file, size, className, onClick }: FileThumbProps) => {
           </button>
         }
       />
-      <TooltipContent
-        placement="top"
-        className="rounded-lg p-1.5 system-xs-medium text-text-secondary"
-      >
-        {name}
-      </TooltipContent>
+      <TooltipContent placement="top">{name}</TooltipContent>
     </Tooltip>
   )
 }

web/app/components/base/infotip/index.tsx

@@ -95,7 +95,7 @@ export function Infotip({
         placement="top"
         sideOffset={sideOffset}
         className={cn(
-          'max-w-75 rounded-md px-3 py-2 system-xs-regular text-text-tertiary',
+          'max-w-75 rounded-lg bg-components-tooltip-bg px-3 py-2 system-xs-regular text-text-secondary shadow-[0px_12px_16px_-4px_var(--color-shadow-shadow-5),0px_4px_6px_-2px_var(--color-shadow-shadow-1)] backdrop-blur-[5px]',
           popupClassName,
         )}
       >

web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-input.tsx

@@ -46,10 +46,7 @@ const ImageUploader = () => {
               </span>
             )}
           </TooltipTrigger>
-          <TooltipContent
-            sideOffset={4}
-            className="rounded-lg p-1.5 system-xs-medium text-text-secondary"
-          >
+          <TooltipContent sideOffset={4}>
             {t(($) => $['imageUploader.tooltip'], {
               ns: 'datasetHitTesting',
               size: fileUploadConfig.imageFileSizeLimit,

web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx

@@ -33,10 +33,7 @@ const StatusIcon: FC<{ status: string; error?: string }> = ({ status, error }) =
           <RiErrorWarningFill aria-hidden className="size-4 shrink-0 text-text-destructive" />
           <span className="sr-only">{errorLabel}</span>
         </TooltipTrigger>
-        <TooltipContent
-          sideOffset={4}
-          className="max-w-60 rounded-xl border-[0.5px] border-components-panel-border px-4 py-3.5 body-xs-regular text-text-secondary"
-        >
+        <TooltipContent sideOffset={4} className="max-w-60 rounded-xl px-4 py-3.5 body-xs-regular">
           {errorLabel}
         </TooltipContent>
       </Tooltip>

web/app/components/datasets/documents/detail/completed/display-toggle.tsx

@@ -34,9 +34,7 @@ const DisplayToggle: FC<DisplayToggleProps> = ({ isCollapsed, toggleCollapsed })
           </button>
         }
       />
-      <TooltipContent className="border-[0.5px] border-components-panel-border system-xs-medium text-text-secondary">
-        {label}
-      </TooltipContent>
+      <TooltipContent>{label}</TooltipContent>
     </Tooltip>
   )
 }

web/app/components/datasets/documents/detail/completed/segment-card/index.tsx

@@ -207,7 +207,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                             </IconButton>
                           }
                         />
-                        <TooltipContent className="system-xs-medium text-text-secondary">
+                        <TooltipContent>
                           {t(($) => $['operation.edit'], { ns: 'common' })}
                         </TooltipContent>
                       </Tooltip>
@@ -227,7 +227,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                             </IconButton>
                           }
                         />
-                        <TooltipContent className="system-xs-medium text-text-secondary">
+                        <TooltipContent>
                           {t(($) => $['operation.delete'], { ns: 'common' })}
                         </TooltipContent>
                       </Tooltip>

web/app/components/datasets/documents/status-item/index.tsx

@@ -134,7 +134,7 @@ const StatusItem = ({
                 </span>
               }
             />
-            <TooltipContent className="system-xs-medium text-text-secondary">
+            <TooltipContent>
               {t(($) => $['list.action.enableWarning'], { ns: 'datasetDocuments' })}
             </TooltipContent>
           </Tooltip>

web/app/components/detail-sidebar/toggle-button.tsx

@@ -42,15 +42,13 @@ export function DetailSidebarToggleButton({
           </IconButton>
         }
       />
-      <TooltipContent placement="right" className="rounded-lg p-1.5">
-        <div className="flex items-center gap-x-1">
-          <span className="px-0.5 system-xs-medium text-text-secondary">{label}</span>
-          <KbdGroup>
-            {detailSidebarToggleShortcutKeys.map((key) => (
-              <Kbd key={key}>{formatForDisplay(key)}</Kbd>
-            ))}
-          </KbdGroup>
-        </div>
+      <TooltipContent placement="right" className="flex items-center gap-1">
+        <span className="px-0.5">{label}</span>
+        <KbdGroup>
+          {detailSidebarToggleShortcutKeys.map((key) => (
+            <Kbd key={key}>{formatForDisplay(key)}</Kbd>
+          ))}
+        </KbdGroup>
       </TooltipContent>
     </Tooltip>
   )

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx

@@ -192,7 +192,6 @@ const ModelLoadBalancingConfigs = ({
                 aria-label={t(($) => $['modelProvider.loadBalancingInfo'], { ns: 'common' })}
                 className="size-3"
                 iconSize="small"
-                popupClassName="max-w-[300px]"
               >
                 {t(($) => $['modelProvider.loadBalancingInfo'], { ns: 'common' })}
               </Infotip>

web/app/components/plugins/base/badges/icon-with-tooltip.tsx

@@ -34,9 +34,7 @@ const IconWithTooltip: FC<IconWithTooltipProps> = ({
   return (
     <Tooltip>
       <TooltipTrigger render={icon} />
-      <TooltipContent className="border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 system-xs-medium text-text-secondary">
-        {popupContent}
-      </TooltipContent>
+      <TooltipContent>{popupContent}</TooltipContent>
     </Tooltip>
   )
 }

web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx

@@ -208,7 +208,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
                     </button>
                   }
                 />
-                <TooltipContent className="system-xs-medium text-text-secondary">
+                <TooltipContent>
                   {t(($) => $['nodes.agent.clickToViewParameterSchema'], { ns: 'workflow' })}
                 </TooltipContent>
               </Tooltip>

web/app/components/snippets/components/snippet-detail-top.tsx

@@ -91,10 +91,7 @@ export function SnippetDetailTop({ expand = true, onToggle }: SnippetDetailTopPr
             />
           }
         />
-        <TooltipContent
-          placement="bottom"
-          className="flex items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 system-xs-medium text-text-secondary shadow-lg backdrop-blur-[5px]"
-        >
+        <TooltipContent placement="bottom" className="flex items-center gap-1">
           <span className="px-0.5">{t(($) => $['gotoAnything.quickAction'], { ns: 'app' })}</span>
           <KbdGroup>
             {GOTO_ANYTHING_HOTKEY.split('+').map((key) => (

web/app/components/workflow/block-selector/start-blocks.tsx

@@ -159,7 +159,7 @@ const StartBlocks = ({
           <Fragment key={block.type}>
             <Tooltip>
               <TooltipTrigger render={row} />
-              <TooltipContent className="rounded-xl">{disabledReason}</TooltipContent>
+              <TooltipContent>{disabledReason}</TooltipContent>
             </Tooltip>
             <span id={previewDescriptionId} className="sr-only">
               {description}

web/app/components/workflow/comment/thread.tsx

@@ -476,7 +476,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(
                     </button>
                   }
                 />
-                <TooltipContent placement="top" className="px-2! py-1.5!">
+                <TooltipContent placement="top" className="px-2">
                   {t(($) => $['comments.aria.deleteComment'], { ns: 'workflow' })}
                 </TooltipContent>
               </Tooltip>
@@ -500,7 +500,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(
                     </button>
                   }
                 />
-                <TooltipContent placement="top" className="px-2! py-1.5!">
+                <TooltipContent placement="top" className="px-2">
                   {t(($) => $['comments.aria.resolveComment'], { ns: 'workflow' })}
                 </TooltipContent>
               </Tooltip>
@@ -521,7 +521,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(
                     </button>
                   }
                 />
-                <TooltipContent placement="top" className="px-2! py-1.5!">
+                <TooltipContent placement="top" className="px-2">
                   {t(($) => $['comments.aria.previousComment'], { ns: 'workflow' })}
                 </TooltipContent>
               </Tooltip>
@@ -541,7 +541,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(
                     </button>
                   }
                 />
-                <TooltipContent placement="top" className="px-2! py-1.5!">
+                <TooltipContent placement="top" className="px-2">
                   {t(($) => $['comments.aria.nextComment'], { ns: 'workflow' })}
                 </TooltipContent>
               </Tooltip>

web/app/components/workflow/header/online-users.tsx

@@ -158,15 +158,10 @@ const OnlineUsers = () => {
                     )
                   }
                 />
-                <TooltipContent
-                  placement="bottom"
-                  sideOffset={4}
-                  className="flex h-7 max-w-55 min-w-0 items-center justify-center rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-1.5 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
-                >
-                  {renderDisplayName(
-                    user,
-                    'max-w-full system-xs-medium text-text-secondary',
-                    'text-text-quaternary',
+                <TooltipContent placement="bottom" sideOffset={4} className="max-w-55 px-3">
+                  {displayName}
+                  {isCurrentUser && (
+                    <span className="ml-1 text-text-quaternary">{currentUserSuffix}</span>
                   )}
                 </TooltipContent>
               </Tooltip>

web/app/components/workflow/header/version-history-button.tsx

@@ -11,18 +11,6 @@ type VersionHistoryButtonProps = {
   onClick: () => Promise<unknown> | unknown
 }
 
-function PopupContent() {
-  const { t } = useTranslation()
-  return (
-    <div className="flex items-center gap-x-1">
-      <div className="px-0.5 system-xs-medium text-text-secondary">
-        {t(($) => $['common.versionHistory'], { ns: 'workflow' })}
-      </div>
-      <ShortcutKbd hotkey={VERSION_HISTORY_HOTKEY} bgColor="gray" textColor="secondary" />
-    </div>
-  )
-}
-
 export function VersionHistoryButton({ onClick }: VersionHistoryButtonProps) {
   const { theme } = useTheme()
   const { t } = useTranslation()
@@ -59,8 +47,14 @@ export function VersionHistoryButton({ onClick }: VersionHistoryButtonProps) {
           </IconButton>
         }
       />
-      <TooltipContent className="rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
-        <PopupContent />
+      <TooltipContent className="flex items-center gap-1">
+        <span className="px-0.5">{label}</span>
+        <ShortcutKbd
+          hotkey={VERSION_HISTORY_HOTKEY}
+
+          bgColor="gray"
+          textColor="secondary"
+        />
       </TooltipContent>
     </Tooltip>
   )

web/app/components/workflow/nodes/llm/components/panel-output-section.tsx

@@ -49,7 +49,7 @@ const PanelOutputSection: FC<Props> = ({
                     </div>
                   }
                 />
-                <TooltipContent className="w-58 rounded-xl border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-4 py-3.5 shadow-lg backdrop-blur-[5px]">
+                <TooltipContent className="w-58 rounded-xl px-4 py-3.5">
                   <div className="title-xs-semi-bold text-text-primary">
                     {t(($) => $['structOutput.modelNotSupported'], { ns: 'app' })}
                   </div>

web/app/components/workflow/nodes/trigger-webhook/panel.tsx

@@ -207,7 +207,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({ id, data }) => {
                   <TooltipContent
                     placement="bottom"
                     sideOffset={4}
-                    className="rounded-md border border-components-panel-border bg-components-tooltip-bg px-1.5 py-1 system-xs-regular text-text-primary shadow-lg backdrop-blur-xs"
+                    className="py-1 system-xs-regular text-text-primary"
                   >
                     {debugUrlCopied
                       ? t(($) => $[`${i18nPrefix}.debugUrlCopied`], { ns: 'workflow' })

web/app/components/workflow/operator/tip-popup.tsx

@@ -13,11 +13,9 @@ const TipPopup = ({ title, children, shortcut }: TipPopupProps) => {
   return (
     <Tooltip>
       <TooltipTrigger render={children} />
-      <TooltipContent sideOffset={4} className="max-w-none bg-transparent p-0 shadow-none">
-        <div className="flex items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 shadow-lg backdrop-blur-[5px]">
-          <span className="system-xs-medium text-text-secondary">{title}</span>
-          {shortcut && <ShortcutKbd shortcut={shortcut} />}
-        </div>
+      <TooltipContent sideOffset={4} className="flex max-w-none items-center gap-1">
+        <span className="px-0.5">{title}</span>
+        {shortcut && <ShortcutKbd shortcut={shortcut} />}
       </TooltipContent>
     </Tooltip>
   )

web/app/components/workflow/variable-inspect/listening.tsx

@@ -202,10 +202,7 @@ const Listening: FC<ListeningProps> = ({ onStop, message }) => {
                 </button>
               }
             />
-            <TooltipContent
-              placement="top"
-              className="rounded-md border border-components-panel-border bg-components-tooltip-bg px-1.5 py-1 system-xs-regular text-text-primary shadow-lg backdrop-blur-xs"
-            >
+            <TooltipContent placement="top" className="py-1 system-xs-regular text-text-primary">
               {debugUrlCopied
                 ? t(($) => $['nodes.triggerWebhook.debugUrlCopied'], { ns: 'workflow' })
                 : t(($) => $['nodes.triggerWebhook.debugUrlCopy'], { ns: 'workflow' })}

web/features/agent-v2/agent-detail/configure/components/orchestrate/files/index.tsx

@@ -367,7 +367,7 @@ function AgentBuildNoteInfotip() {
       aria-label={t(($) => $['agentDetail.configure.files.buildNote.tooltip'])}
       className="size-5 text-text-quaternary hover:text-text-quaternary"
       iconSize="large"
-      popupClassName="w-[230px] rounded-xl bg-components-tooltip-bg px-4 py-3.5 text-text-secondary shadow-lg backdrop-blur-[5px]"
+      popupClassName="w-[230px] rounded-xl px-4 py-3.5"
     >
       <p className="body-xs-regular text-text-secondary">
         <Trans

web/features/agent-v2/agent-detail/navigation.tsx

@@ -160,10 +160,7 @@ export function AgentDetailTop({ expand = true, onToggle }: AgentDetailTopProps)
             />
           }
         />
-        <TooltipContent
-          placement="bottom"
-          className="flex items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 system-xs-medium text-text-secondary shadow-lg backdrop-blur-[5px]"
-        >
+        <TooltipContent placement="bottom" className="flex items-center gap-1">
           <span className="px-0.5">{tApp(($) => $['gotoAnything.quickAction'])}</span>
           <KbdGroup>
             {GOTO_ANYTHING_HOTKEY.split('+').map((key) => (

web/features/skills/detail/file-tree.tsx

@@ -1259,10 +1259,7 @@ export function FileTree({
                   />
                 }
               />
-              <TooltipContent
-                placement="bottom"
-                className="flex items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 system-xs-medium text-text-secondary shadow-lg backdrop-blur-[5px]"
-              >
+              <TooltipContent placement="bottom" className="flex items-center gap-1">
                 <span className="px-0.5">{tApp(($) => $['gotoAnything.quickAction'])}</span>
                 <KbdGroup>
                   {GOTO_ANYTHING_HOTKEY.split('+').map((key) => (