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:
The updated dependencies in package.json will look like this:
{
"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.
Javascript
// 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:
Hide tooltip after x milliseconds
