estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kerwin Bryant
2025-07-16 11:26:54 +08:00
committed by GitHub
parent 0dee41c074
commit 229b4d621e
15 changed files with 4 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
View File

@@ -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'>

3
web/app/components/app/configuration/config/agent/agent-tools/index.tsx
View File

@@ -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)

2
web/app/components/app/configuration/prompt-value-panel/index.tsx
View File

@@ -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}

2
web/app/components/base/tooltip/index.spec.tsx
View File

@@ -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!)

4
web/app/components/base/tooltip/index.tsx
View File

@@ -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)

2
web/app/components/datasets/documents/list.tsx
View File

@@ -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' />

1
web/app/components/header/account-setting/members-page/index.tsx
View File

@@ -70,7 +70,6 @@ const MembersPage = () => {
{isCurrentWorkspaceOwner && <span>
<Tooltip
popupContent={t('common.account.editWorkspaceInfo')}
needsDelay
>
<div
className='cursor-pointer rounded-md p-1 hover:bg-black/5'

2
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
View File

@@ -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>

1
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
View File

@@ -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>

1
web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
View File

@@ -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'>

1
web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
View File

@@ -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>

1
web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
View File

@@ -161,7 +161,6 @@ const ToolItem = ({
{isError && (
<Tooltip
popupContent={errorTip}
needsDelay
>
<div>
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />

1
web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
View File

@@ -49,7 +49,6 @@ const NotFoundWarn = (props: {
</p>
</div>
}
needsDelay
>
<div>
<RiErrorWarningFill className='size-4 text-text-destructive' />

1
web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
View File

@@ -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' />

1
web/app/signin/oneMoreStep.tsx
View File

@@ -103,7 +103,6 @@ const OneMoreStep = () => {
</div>
</div>
}
needsDelay
>
<span className='cursor-pointer text-text-accent-secondary'>{t('login.dontHave')}</span>
</Tooltip>