Improve Tooltip UX by enabling delay by default (#21383)
This commit is contained in:
@@ -62,7 +62,6 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
position='right'
|
position='right'
|
||||||
noDecoration
|
noDecoration
|
||||||
needsDelay
|
|
||||||
popupContent={
|
popupContent={
|
||||||
<LinkedAppsPanel
|
<LinkedAppsPanel
|
||||||
relatedApps={relatedApps.data}
|
relatedApps={relatedApps.data}
|
||||||
@@ -87,7 +86,6 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
position='right'
|
position='right'
|
||||||
noDecoration
|
noDecoration
|
||||||
needsDelay
|
|
||||||
popupContent={
|
popupContent={
|
||||||
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
|
<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'>
|
<div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
|
||||||
|
@@ -209,7 +209,6 @@ const AgentTools: FC = () => {
|
|||||||
<span className='text-text-tertiary'>{item.tool_label}</span>
|
<span className='text-text-tertiary'>{item.tool_label}</span>
|
||||||
{!item.isDeleted && (
|
{!item.isDeleted && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
needsDelay
|
|
||||||
popupContent={
|
popupContent={
|
||||||
<div className='w-[180px]'>
|
<div className='w-[180px]'>
|
||||||
<div className='mb-1.5 text-text-secondary'>{item.tool_name}</div>
|
<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'>
|
<div className='mr-2 flex items-center'>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
popupContent={t('tools.toolRemoved')}
|
popupContent={t('tools.toolRemoved')}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
|
<div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
|
||||||
<AlertTriangle className='h-4 w-4 text-[#F79009]' />
|
<AlertTriangle className='h-4 w-4 text-[#F79009]' />
|
||||||
@@ -259,7 +257,6 @@ const AgentTools: FC = () => {
|
|||||||
{!item.notAuthor && (
|
{!item.notAuthor && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
popupContent={t('tools.setBuiltInTools.infoAndSetting')}
|
popupContent={t('tools.setBuiltInTools.infoAndSetting')}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<div className='cursor-pointer rounded-md p-1 hover:bg-black/5' onClick={() => {
|
<div className='cursor-pointer rounded-md p-1 hover:bg-black/5' onClick={() => {
|
||||||
setCurrentTool(item)
|
setCurrentTool(item)
|
||||||
|
@@ -177,7 +177,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
|||||||
<div className='flex justify-between border-t border-divider-subtle p-4 pt-3'>
|
<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>
|
<Button className='w-[72px]' onClick={onClear}>{t('common.operation.clear')}</Button>
|
||||||
{canNotRun && (
|
{canNotRun && (
|
||||||
<Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')} needsDelay>
|
<Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')}>
|
||||||
<Button
|
<Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
disabled={canNotRun}
|
disabled={canNotRun}
|
||||||
|
@@ -50,7 +50,7 @@ describe('Tooltip', () => {
|
|||||||
|
|
||||||
test('should close on mouse leave when triggerMethod is hover', () => {
|
test('should close on mouse leave when triggerMethod is hover', () => {
|
||||||
const triggerClassName = 'custom-trigger'
|
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}`)
|
const trigger = container.querySelector(`.${triggerClassName}`)
|
||||||
act(() => {
|
act(() => {
|
||||||
fireEvent.mouseEnter(trigger!)
|
fireEvent.mouseEnter(trigger!)
|
||||||
|
@@ -33,7 +33,7 @@ const Tooltip: FC<TooltipProps> = ({
|
|||||||
noDecoration,
|
noDecoration,
|
||||||
offset,
|
offset,
|
||||||
asChild = true,
|
asChild = true,
|
||||||
needsDelay = false,
|
needsDelay = true,
|
||||||
}) => {
|
}) => {
|
||||||
const [open, setOpen] = useState(false)
|
const [open, setOpen] = useState(false)
|
||||||
const [isHoverPopup, {
|
const [isHoverPopup, {
|
||||||
@@ -68,7 +68,7 @@ const Tooltip: FC<TooltipProps> = ({
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (!isHoverPopupRef.current && !isHoverTriggerRef.current)
|
if (!isHoverPopupRef.current && !isHoverTriggerRef.current)
|
||||||
setOpen(false)
|
setOpen(false)
|
||||||
}, 500)
|
}, 300)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
setOpen(false)
|
setOpen(false)
|
||||||
|
@@ -154,7 +154,6 @@ export const StatusItem: FC<{
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
popupContent={t('datasetDocuments.list.action.enableWarning')}
|
popupContent={t('datasetDocuments.list.action.enableWarning')}
|
||||||
popupClassName='text-text-secondary system-xs-medium'
|
popupClassName='text-text-secondary system-xs-medium'
|
||||||
needsDelay
|
|
||||||
disabled={!archived}
|
disabled={!archived}
|
||||||
>
|
>
|
||||||
<Switch
|
<Switch
|
||||||
@@ -285,7 +284,6 @@ export const OperationAction: FC<{
|
|||||||
? <Tooltip
|
? <Tooltip
|
||||||
popupContent={t('datasetDocuments.list.action.enableWarning')}
|
popupContent={t('datasetDocuments.list.action.enableWarning')}
|
||||||
popupClassName='!font-semibold'
|
popupClassName='!font-semibold'
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<Switch defaultValue={false} onChange={noop} disabled={true} size='md' />
|
<Switch defaultValue={false} onChange={noop} disabled={true} size='md' />
|
||||||
|
@@ -70,7 +70,6 @@ const MembersPage = () => {
|
|||||||
{isCurrentWorkspaceOwner && <span>
|
{isCurrentWorkspaceOwner && <span>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
popupContent={t('common.account.editWorkspaceInfo')}
|
popupContent={t('common.account.editWorkspaceInfo')}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className='cursor-pointer rounded-md p-1 hover:bg-black/5'
|
className='cursor-pointer rounded-md p-1 hover:bg-black/5'
|
||||||
|
@@ -63,7 +63,6 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
|
|||||||
'/plugins',
|
'/plugins',
|
||||||
)}
|
)}
|
||||||
asChild={false}
|
asChild={false}
|
||||||
needsDelay={true}
|
|
||||||
>
|
>
|
||||||
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
|
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
@@ -87,7 +86,6 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
|
|||||||
'/plugins',
|
'/plugins',
|
||||||
)}
|
)}
|
||||||
asChild={false}
|
asChild={false}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
|
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@@ -105,7 +105,6 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
|
|||||||
popupContent={
|
popupContent={
|
||||||
<span className='font-semibold'>{t('common.modelProvider.modelHasBeenDeprecated')}</span>} offset={{ mainAxis: 4 }
|
<span className='font-semibold'>{t('common.modelProvider.modelHasBeenDeprecated')}</span>} offset={{ mainAxis: 4 }
|
||||||
}
|
}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<Switch defaultValue={false} disabled size='md' />
|
<Switch defaultValue={false} disabled size='md' />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@@ -68,7 +68,6 @@ const EndpointList = ({ detail }: Props) => {
|
|||||||
{t('plugin.detailPanel.endpoints')}
|
{t('plugin.detailPanel.endpoints')}
|
||||||
<Tooltip
|
<Tooltip
|
||||||
position='right'
|
position='right'
|
||||||
needsDelay
|
|
||||||
popupClassName='w-[240px] p-4 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'
|
popupClassName='w-[240px] p-4 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'
|
||||||
popupContent={
|
popupContent={
|
||||||
<div className='flex flex-col gap-2'>
|
<div className='flex flex-col gap-2'>
|
||||||
|
@@ -114,7 +114,6 @@ const MultipleToolSelector = ({
|
|||||||
{tooltip && (
|
{tooltip && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
popupContent={tooltip}
|
popupContent={tooltip}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<div><RiQuestionLine className='h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
|
<div><RiQuestionLine className='h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@@ -161,7 +161,6 @@ const ToolItem = ({
|
|||||||
{isError && (
|
{isError && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
popupContent={errorTip}
|
popupContent={errorTip}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
|
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
|
||||||
|
@@ -49,7 +49,6 @@ const NotFoundWarn = (props: {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<RiErrorWarningFill className='size-4 text-text-destructive' />
|
<RiErrorWarningFill className='size-4 text-text-destructive' />
|
||||||
|
@@ -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>
|
<a className='text-text-accent' target='_blank' href='https://jinja.palletsprojects.com/en/2.10.x/'>{t('workflow.common.learnMore')}</a>
|
||||||
</div>
|
</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')}>
|
<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' />
|
<Jinja className='h-3 w-6 text-text-quaternary' />
|
||||||
|
@@ -103,7 +103,6 @@ const OneMoreStep = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
needsDelay
|
|
||||||
>
|
>
|
||||||
<span className='cursor-pointer text-text-accent-secondary'>{t('login.dontHave')}</span>
|
<span className='cursor-pointer text-text-accent-secondary'>{t('login.dontHave')}</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
Reference in New Issue
Block a user