[英]How can I show tooltip info for 4 seconds on page load and then hide, then after show on hover?
I am using react-bootstrap version 0.32.4 , I can't update the version, that will bring up many changes.我正在使用 react-bootstrap 版本0.32.4 ,我无法更新版本,这会带来很多变化。
I want to have a tooltip info showing for 4 seconds on page load and then it should hide, after that the tool tip info should be shown on hover.我想让一个工具提示信息在页面加载时显示 4 秒,然后它应该隐藏,之后工具提示信息应该在悬停时显示。
Below is the code:下面是代码:
import React from "react";
import "./styles.css";
import { Button, Tooltip, OverlayTrigger } from "react-bootstrap";
import { render } from "react-dom";
class App extends React.Component {
constructor(props){
super(props);
this.state = {
show: true
}
}
getTooltip = () => {
return <Tooltip id="tooltip">this is tooltip text</Tooltip>;
};
componentDidMount() {
console.log("ran")
setTimeout(function() {
this.setState({show: false})
}.bind(this), 4000);
}
render(){
console.log(`running for componet did update: ${this.state.show}`)
return (
<>
<OverlayTrigger
trigger={['hover', 'focus']}
defaultShow={this.state.show}
placement="right"
overlay={this.getTooltip()}
>
<Button>Click me!</Button>
</OverlayTrigger>
</>
);
}
}
export default App;
I am trying to use defaultShow but it is not doing anything.我正在尝试使用 defaultShow,但它什么也没做。 How can I achieve this functionality with react-bootstrap version 0.32.4如何使用 react-bootstrap 0.32.4版实现此功能
Below is the link to code sandbox:下面是代码沙箱的链接:
https://codesandbox.io/s/react-bootstrap3-tooltip-jqnzqs https://codesandbox.io/s/react-bootstrap3-tooltip-jqnzqs
You can use useRef
to get the overlay's functions for showing/hiding the tooltip within the overlay您可以使用useRef
获取叠加层的功能,以在叠加层中显示/隐藏工具提示
Here is the sandbox这里是沙盒
You also can look into the below implementation with some explanation in the code您还可以通过代码中的一些解释来查看以下实现
import React from "react";
import "./styles.css";
import { Button, Tooltip, OverlayTrigger } from "react-bootstrap";
class App extends React.Component {
// const [isShowing, setIsShowing] = useState(true);
constructor(props) {
super(props);
//create the ref for the overlay
this.overlayRef = React.createRef();
this.state = {
isShowing: true
};
}
getTooltip = () => {
return <Tooltip id="tooltip">this is tooltip text</Tooltip>;
};
componentDidMount() {
//using ref to show the tooltip in the overlay
this.overlayRef.current.show();
setTimeout(() => {
//using ref to hide the tooltip in the overlay after 4 seconds
this.overlayRef.current.hide();
this.setState({ isShowing: false });
}, 4000);
}
render() {
console.log(this.state.isShowing);
return (
<div className="tool-tip-div">
<OverlayTrigger
ref={this.overlayRef}
trigger={["hover", "focus"]}
placement="top"
overlay={this.getTooltip()}
defaultShow={this.state.isShowing}
>
<Button>Click me!</Button>
</OverlayTrigger>
</div>
);
}
}
export default App;
I`m not work with react, but hope it should help you我不使用反应,但希望它可以帮助你
constructor(props) {
super(props);
this.state = {
isShowing: true,
showDelayPassed: false,
showDelay: 4000
};
}
componentDidMount() {
setTimeout(
function () {
this.setState({ showDelayPassed: true });
}.bind(this),
this.state.showDelay);
}
{ this.state.isShowing ?
<Tooltip
defaultShow={false}
id="tooltip"
onMouseEnter={() => {
if(this.state.showDelayPassed) {
this.setState({ isShowing: false })
}
}}
>
this is test tooltip text
</Tooltip> : null
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.