如何在立即单击按钮时不显示工具提示?
How to not show tooltip when click the button immediately?
更新:这似乎是一个用户体验问题,我在 GitHub 上创建了一个问题,你可以在这里跟踪:
https://github.com/reactstrap/reactstrap/issues/910#issuecomment-374369572
我正在使用 Reactstrap。
我只想在鼠标悬停 2 秒后显示工具提示。当我立即点击按钮时,我不想显示它。
但是现在当我立即点击按钮时,它会显示工具提示。
我尝试了受控 Tooltip
和 UncontrolledTooltip
,但都不起作用。
对于Tooltip
,我尝试添加onClick={() => {}}
,但也无济于事。
如何在立即点击按钮时不显示工具提示?谢谢
constructor(props) {
super(props);
this.state = {
isTooltipOpen: false
};
}
onToggleTooltip = () => {
const { isTooltipOpen } = this.state;
this.setState({ isTooltipOpen: !isTooltipOpen });
};
render() {
const { isTooltipOpen } = this.state;
return (
<div>
<p>
<button id="controlledTooltip">Controlled Tooltip</button>
</p>
<p>
<button id="uncontrolledTooltip">Uncontrolled Tooltip</button>
</p>
<Tooltip
delay={{ show: 2000, hide: 0 }}
isOpen={isTooltipOpen}
placement="right"
target="controlledTooltip"
toggle={this.onToggleTooltip}
// onClick={() => {}}
>
Discard draft
</Tooltip>
<UncontrolledTooltip
placement="right"
target="uncontrolledTooltip"
delay={{ show: 2000, hide: 0 }}
>
Hello world!
</UncontrolledTooltip>
</div>
);
}
利用 setTimeOut() 函数。为防止丢失上下文 (this),使用箭头函数作为保留正确执行上下文的简单方法。
setTimeout(() => {
this.setState({ isTooltipOpen: !isTooltipOpen });
}, 2000);
查看更新、工作、示例:https://codesandbox.io/s/j4ojkyv3l3
你也可以看看https://www.npmjs.com/package/react-hover-observer。这是一个 React 组件,用于通知其子组件悬停交互。
它还支持延迟悬停和hover-off,这有助于减少意外触发。
更新:这似乎是一个用户体验问题,我在 GitHub 上创建了一个问题,你可以在这里跟踪:
https://github.com/reactstrap/reactstrap/issues/910#issuecomment-374369572
我正在使用 Reactstrap。
我只想在鼠标悬停 2 秒后显示工具提示。当我立即点击按钮时,我不想显示它。
但是现在当我立即点击按钮时,它会显示工具提示。
我尝试了受控 Tooltip
和 UncontrolledTooltip
,但都不起作用。
对于Tooltip
,我尝试添加onClick={() => {}}
,但也无济于事。
如何在立即点击按钮时不显示工具提示?谢谢
constructor(props) {
super(props);
this.state = {
isTooltipOpen: false
};
}
onToggleTooltip = () => {
const { isTooltipOpen } = this.state;
this.setState({ isTooltipOpen: !isTooltipOpen });
};
render() {
const { isTooltipOpen } = this.state;
return (
<div>
<p>
<button id="controlledTooltip">Controlled Tooltip</button>
</p>
<p>
<button id="uncontrolledTooltip">Uncontrolled Tooltip</button>
</p>
<Tooltip
delay={{ show: 2000, hide: 0 }}
isOpen={isTooltipOpen}
placement="right"
target="controlledTooltip"
toggle={this.onToggleTooltip}
// onClick={() => {}}
>
Discard draft
</Tooltip>
<UncontrolledTooltip
placement="right"
target="uncontrolledTooltip"
delay={{ show: 2000, hide: 0 }}
>
Hello world!
</UncontrolledTooltip>
</div>
);
}
利用 setTimeOut() 函数。为防止丢失上下文 (this),使用箭头函数作为保留正确执行上下文的简单方法。
setTimeout(() => {
this.setState({ isTooltipOpen: !isTooltipOpen });
}, 2000);
查看更新、工作、示例:https://codesandbox.io/s/j4ojkyv3l3
你也可以看看https://www.npmjs.com/package/react-hover-observer。这是一个 React 组件,用于通知其子组件悬停交互。 它还支持延迟悬停和hover-off,这有助于减少意外触发。