In this article, we will see how to hide the Tooltip after N milliseconds using React-Bootstrap. In web applications, a tooltip provides additional information when a user hovers over an element. However, for better user experience and control, there may be a need to hide the tooltip after N milliseconds. In this article, we will implement the same functionality using ReactJS and Bootstrap.
Prerequisites:
Creating React Application And Installing Modules:
Step 1: Create a React application using the following command
npx create-react-app folderName
Step 2: Navigate to the project folder using the following command
cd folderName
Step 3: Now install React-bootstrap and bootstrap
npm install react-bootstrap bootstrap
Step 4: Add Bootstrap CSS to index.js
import 'bootstrap/dist/css/bootstrap.min.css';
Project Structure:
{
"name": "tooltipapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
Example: Now write down the following code in App.js File. Here App is our default component where we have written our code.
// App.js File import React, { useState } from "react" ;
import { OverlayTrigger, Tooltip, Container } from "react-bootstrap" ;
const App = () => { // State to control the visibility of the tooltip
const [showToolTip, setShowToolTip] = useState( false );
// Function to handle mouse enter event
const handleMouseEnter = () => {
// When the mouse enters, show the tooltip
setShowToolTip( true );
};
// Function to handle tooltip toggle event
const handleToolTipToggle = (show) => {
if (show) {
// If the tooltip is shown, set a timer
// to hide it after 3000 milliseconds
// (3 seconds)
setTimeout(() => {
setShowToolTip( false );
}, 3000);
}
};
return (
<div
className= "d-flex justify-content-center
align-items-center vh-100"
// Use vh-100 to make the container
// take the full viewport height
>
<OverlayTrigger
// Trigger the tooltip on hover
trigger= "hover"
// Position the tooltip below the element
placement= "bottom"
overlay={
<Tooltip className= "custom-tooltip" >
<div>This is a tooltip!</div>
</Tooltip>
}
// Pass the state to control tooltip visibility
show={showToolTip}
// Callback when the tooltip is toggled
onToggle={handleToolTipToggle}
>
<div
// Attach the mouse enter event handler
onMouseEnter={handleMouseEnter}
className= "p-2 bg-primary text-white
rounded cursor-pointer"
>
Hover over me to show tooltip
</div>
</OverlayTrigger>
</div>
);
}; export default App;
|
Steps to Run Application :
Step 1: Run the Application using following command from the root directory of the project :
npm start
Step 2: Open web-browser and type the following URL
http://localhost:3000/
Output: