How to Hide Tooltip After N Milliseconds in React-Bootstrap ?

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:

• ReactJS
• React Bootstrap
• JSX

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