Reproduction link <a href="https://stackblitz.com/edit/react-wubjt

<a href="https://stackblitz.com/~/github.com/ant-design/ant-design/issues/48782?repros

预期行为，Tooltip trigger 为 hover 时只有鼠标进入时才会触发。 <p dir="auto

Tooltip 从空字符到有值后，不会马上渲染，需要鼠标移出后再移入才显示 about ant-design HOT 7 OPEN

linxianxi commented on May 28, 2024

Tooltip 从空字符到有值后，不会马上渲染，需要鼠标移出后再移入才显示

from ant-design.

Comments (7)

stackblitz commented on May 28, 2024

Start a new pull request in StackBlitz Codeflow.

react-wubjtr (Open reproduction)

from ant-design.

Wxh16144 commented on May 28, 2024

ant-design/components/tooltip/__tests__/tooltip.test.tsx

Lines 36 to 116 in 8b1f79c

 it('check `onOpenChange` arguments', async () => { 

 const onOpenChange = jest.fn(); 

 const ref = React.createRef<any>(); 

 const { container, rerender } = render( 

 <Tooltip 

 title="" 

 mouseEnterDelay={0} 

 mouseLeaveDelay={0} 

 onOpenChange={onOpenChange} 

 ref={ref} 

 > 

 <div id="hello">Hello world!</div> 

 </Tooltip>, 

 ); 

 // `title` is empty. 

 const divElement = container.querySelector('#hello'); 

 fireEvent.mouseEnter(divElement!); 

 await waitFakeTimer(); 

 expect(onOpenChange).not.toHaveBeenCalled(); 

 expect(isTooltipOpen()).toBeFalsy(); 

 expect(container.querySelector('.ant-tooltip-open')).toBeNull(); 

 fireEvent.mouseLeave(divElement!); 

 await waitFakeTimer(); 

 expect(onOpenChange).not.toHaveBeenCalled(); 

 expect(isTooltipOpen()).toBeFalsy(); 

 expect(container.querySelector('.ant-tooltip-open')).toBeNull(); 

 // update `title` value. 

 rerender( 

 <Tooltip 

 title="Have a nice day!" 

 mouseEnterDelay={0} 

 mouseLeaveDelay={0} 

 onOpenChange={onOpenChange} 

 ref={ref} 

 > 

 <div id="hello">Hello world!</div> 

 </Tooltip>, 

 ); 

 fireEvent.mouseEnter(divElement!); 

 await waitFakeTimer(); 

 expect(onOpenChange).toHaveBeenLastCalledWith(true); 

 expect(isTooltipOpen()).toBeTruthy(); 

 expect(container.querySelector('.ant-tooltip-open')).not.toBeNull(); 

 fireEvent.mouseLeave(divElement!); 

 await waitFakeTimer(); 

 expect(onOpenChange).toHaveBeenLastCalledWith(false); 

 expect(isTooltipOpen()).toBeFalsy(); 

 expect(container.querySelector('.ant-tooltip-open')).toBeNull(); 

 // add `open` props. 

 rerender( 

 <Tooltip 

 title="Have a nice day!" 

 mouseEnterDelay={0} 

 mouseLeaveDelay={0} 

 onOpenChange={onOpenChange} 

 ref={ref} 

 open={false} 

 > 

 <div id="hello">Hello world!</div> 

 </Tooltip>, 

 ); 

 fireEvent.mouseEnter(divElement!); 

 await waitFakeTimer(); 

 expect(onOpenChange).toHaveBeenLastCalledWith(true); 

 const lastCount = onOpenChange.mock.calls.length; 

 expect(isTooltipOpen()).toBeFalsy(); 

 expect(container.querySelector('.ant-tooltip-open')).toBeNull(); 

 // always trigger onOpenChange 

 fireEvent.mouseLeave(divElement!); 

 await waitFakeTimer(); 

 expect(onOpenChange.mock.calls.length).toBe(lastCount); // no change with lastCount 

 expect(isTooltipOpen()).toBeFalsy(); 

 expect(container.querySelector('.ant-tooltip-open')).toBeNull(); 

 });

看这段测试用例貌似是预期的？

from ant-design.

afc163 commented on May 28, 2024

预期行为，Tooltip trigger 为 hover 时只有鼠标进入时才会触发。

from ant-design.

linxianxi commented on May 28, 2024

预期行为，Tooltip trigger 为 hover 时只有鼠标进入时才会触发。

试了下 floating-ui 是可以的。antd 要这样才行

from ant-design.

afc163 commented on May 28, 2024

直接用 trigger="click" ？

from ant-design.

linxianxi commented on May 28, 2024

测试了下，为空时移入不会触发 onOpenChange，点击后有 title 了，open 还是 false，所以不会显示出来。

我感觉正确的应该是这样的：为空时移入时不触发 onOpenChange，点击后有 title 了，触发 onOpenChange true。
内部应该是维护一个 open，不管 title 为不为空，都会更着改变，只是空的时候不触发 onOpenChange 而已

from ant-design.

linxianxi commented on May 28, 2024

场景是这样的，Button 外面套一个 Tooltip，点击后满足某个条件后禁用，并马上在 Tooltip 显示禁用的原因。如果还需要移出再移入才显示的话，给用户不太直观，他可能不清楚。现在是用的条件渲染 Tooltip 实现。

from ant-design.

Tooltip 从空字符到有值后，不会马上渲染，需要鼠标移出后再移入才显示 about ant-design HOT 7 OPEN

Comments (7)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	it('check `onOpenChange` arguments', async () => {
	const onOpenChange = jest.fn();
	const ref = React.createRef<any>();

	const { container, rerender } = render(
	<Tooltip
	title=""
	mouseEnterDelay={0}
	mouseLeaveDelay={0}
	onOpenChange={onOpenChange}
	ref={ref}
	>
	<div id="hello">Hello world!</div>
	</Tooltip>,
	);

	// `title` is empty.
	const divElement = container.querySelector('#hello');
	fireEvent.mouseEnter(divElement!);
	await waitFakeTimer();
	expect(onOpenChange).not.toHaveBeenCalled();
	expect(isTooltipOpen()).toBeFalsy();
	expect(container.querySelector('.ant-tooltip-open')).toBeNull();

	fireEvent.mouseLeave(divElement!);
	await waitFakeTimer();
	expect(onOpenChange).not.toHaveBeenCalled();
	expect(isTooltipOpen()).toBeFalsy();
	expect(container.querySelector('.ant-tooltip-open')).toBeNull();

	// update `title` value.
	rerender(
	<Tooltip
	title="Have a nice day!"
	mouseEnterDelay={0}
	mouseLeaveDelay={0}
	onOpenChange={onOpenChange}
	ref={ref}
	>
	<div id="hello">Hello world!</div>
	</Tooltip>,
	);
	fireEvent.mouseEnter(divElement!);
	await waitFakeTimer();
	expect(onOpenChange).toHaveBeenLastCalledWith(true);
	expect(isTooltipOpen()).toBeTruthy();
	expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();

	fireEvent.mouseLeave(divElement!);
	await waitFakeTimer();
	expect(onOpenChange).toHaveBeenLastCalledWith(false);
	expect(isTooltipOpen()).toBeFalsy();
	expect(container.querySelector('.ant-tooltip-open')).toBeNull();

	// add `open` props.
	rerender(
	<Tooltip
	title="Have a nice day!"
	mouseEnterDelay={0}
	mouseLeaveDelay={0}
	onOpenChange={onOpenChange}
	ref={ref}
	open={false}
	>
	<div id="hello">Hello world!</div>
	</Tooltip>,
	);
	fireEvent.mouseEnter(divElement!);
	await waitFakeTimer();
	expect(onOpenChange).toHaveBeenLastCalledWith(true);
	const lastCount = onOpenChange.mock.calls.length;
	expect(isTooltipOpen()).toBeFalsy();
	expect(container.querySelector('.ant-tooltip-open')).toBeNull();

	// always trigger onOpenChange
	fireEvent.mouseLeave(divElement!);
	await waitFakeTimer();
	expect(onOpenChange.mock.calls.length).toBe(lastCount); // no change with lastCount
	expect(isTooltipOpen()).toBeFalsy();
	expect(container.querySelector('.ant-tooltip-open')).toBeNull();
	});