Improve Tooltip UX by enabling delay by default (#21383)

7 months ago · 4a06e4d4d9
parent 5ba6983727
commit 4a06e4d4d9
15 changed files with 4 additions and 21 deletions
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@ -62,7 +62,6 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
          <Tooltip
            position='right'
            noDecoration
-            needsDelay
            popupContent={
              <LinkedAppsPanel
                relatedApps={relatedApps.data}
@ -87,7 +86,6 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
      <Tooltip
        position='right'
        noDecoration
-        needsDelay
        popupContent={
          <div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
            <div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@ -209,7 +209,6 @@ const AgentTools: FC = () => {
                  <span className='text-text-tertiary'>{item.tool_label}</span>
                  {!item.isDeleted && (
                    <Tooltip
-                      needsDelay
                      popupContent={
                        <div className='w-[180px]'>
                          <div className='mb-1.5 text-text-secondary'>{item.tool_name}</div>
@ -232,7 +231,6 @@ const AgentTools: FC = () => {
                  <div className='mr-2 flex items-center'>
                    <Tooltip
                      popupContent={t('tools.toolRemoved')}
-                      needsDelay
                    >
                      <div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
                        <AlertTriangle className='h-4 w-4 text-[#F79009]' />
@ -259,7 +257,6 @@ const AgentTools: FC = () => {
                    {!item.notAuthor && (
                      <Tooltip
                        popupContent={t('tools.setBuiltInTools.infoAndSetting')}
-                        needsDelay
                      >
                        <div className='cursor-pointer rounded-md p-1  hover:bg-black/5' onClick={() => {
                          setCurrentTool(item)
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@ -177,7 +177,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
          <div className='flex justify-between border-t border-divider-subtle p-4 pt-3'>
            <Button className='w-[72px]' onClick={onClear}>{t('common.operation.clear')}</Button>
            {canNotRun && (
-              <Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')} needsDelay>
+              <Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')}>
                <Button
                  variant="primary"
                  disabled={canNotRun}
--- a/web/app/components/base/tooltip/index.spec.tsx
+++ b/web/app/components/base/tooltip/index.spec.tsx
@ -50,7 +50,7 @@ describe('Tooltip', () => {

    test('should close on mouse leave when triggerMethod is hover', () => {
      const triggerClassName = 'custom-trigger'
-      const { container } = render(<Tooltip popupContent="Tooltip content" triggerClassName={triggerClassName} />)
+      const { container } = render(<Tooltip popupContent="Tooltip content" triggerClassName={triggerClassName} needsDelay={false} />)
      const trigger = container.querySelector(`.${triggerClassName}`)
      act(() => {
        fireEvent.mouseEnter(trigger!)
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@ -33,7 +33,7 @@ const Tooltip: FC<TooltipProps> = ({
  noDecoration,
  offset,
  asChild = true,
-  needsDelay = false,
+  needsDelay = true,
 }) => {
  const [open, setOpen] = useState(false)
  const [isHoverPopup, {
@ -68,7 +68,7 @@ const Tooltip: FC<TooltipProps> = ({
      setTimeout(() => {
        if (!isHoverPopupRef.current && !isHoverTriggerRef.current)
          setOpen(false)
-      }, 500)
+      }, 300)
    }
    else {
      setOpen(false)
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@ -154,7 +154,6 @@ export const StatusItem: FC<{
          <Tooltip
            popupContent={t('datasetDocuments.list.action.enableWarning')}
            popupClassName='text-text-secondary system-xs-medium'
-            needsDelay
            disabled={!archived}
          >
            <Switch
@ -285,7 +284,6 @@ export const OperationAction: FC<{
          ? <Tooltip
            popupContent={t('datasetDocuments.list.action.enableWarning')}
            popupClassName='!font-semibold'
-            needsDelay
          >
            <div>
              <Switch defaultValue={false} onChange={noop} disabled={true} size='md' />
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@ -73,7 +73,6 @@ const MembersPage = () => {
              {isCurrentWorkspaceOwner && <span>
                <Tooltip
                  popupContent={t('common.account.editWorkspaceInfo')}
-                  needsDelay
                >
                  <div
                    className='cursor-pointer rounded-md p-1 hover:bg-black/5'
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
@ -63,7 +63,6 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
                '/plugins',
              )}
              asChild={false}
-              needsDelay={true}
            >
              <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
            </Tooltip>
@ -87,7 +86,6 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
            '/plugins',
          )}
          asChild={false}
-          needsDelay
        >
          <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
        </Tooltip>
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@ -105,7 +105,6 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
                popupContent={
                  <span className='font-semibold'>{t('common.modelProvider.modelHasBeenDeprecated')}</span>} offset={{ mainAxis: 4 }
                }
-                needsDelay
              >
                <Switch defaultValue={false} disabled size='md' />
              </Tooltip>
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@ -68,7 +68,6 @@ const EndpointList = ({ detail }: Props) => {
          {t('plugin.detailPanel.endpoints')}
          <Tooltip
            position='right'
-            needsDelay
            popupClassName='w-[240px] p-4 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'
            popupContent={
              <div className='flex flex-col gap-2'>
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@ -114,7 +114,6 @@ const MultipleToolSelector = ({
          {tooltip && (
            <Tooltip
              popupContent={tooltip}
-              needsDelay
            >
              <div><RiQuestionLine className='h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
            </Tooltip>
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@ -161,7 +161,6 @@ const ToolItem = ({
      {isError && (
        <Tooltip
          popupContent={errorTip}
-          needsDelay
        >
          <div>
            <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@ -49,7 +49,6 @@ const NotFoundWarn = (props: {
        </p>
      </div>
    }
-    needsDelay
  >
    <div>
      <RiErrorWarningFill className='size-4 text-text-destructive' />
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@ -173,7 +173,6 @@ const Editor: FC<Props> = ({
                        <a className='text-text-accent' target='_blank' href='https://jinja.palletsprojects.com/en/2.10.x/'>{t('workflow.common.learnMore')}</a>
                      </div>
                    }
-                    needsDelay
                  >
                    <div className={cn(editionType === EditionType.jinja2 && 'border-components-button-ghost-bg-hover bg-components-button-ghost-bg-hover', 'flex h-[22px] items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-components-button-ghost-bg-hover')}>
                      <Jinja className='h-3 w-6 text-text-quaternary' />
--- a/web/app/signin/oneMoreStep.tsx
+++ b/web/app/signin/oneMoreStep.tsx
@ -103,7 +103,6 @@ const OneMoreStep = () => {
                    </div>
                  </div>
                }
-                needsDelay
              >
                <span className='cursor-pointer text-text-accent-secondary'>{t('login.dontHave')}</span>
              </Tooltip>