Chakra UI’s Tooltip component provides concise information when users hover over elements, enhancing user interaction and comprehension. It seamlessly integrates into both development and production stages, streamlining the user experience on websites or apps.

Prerequisites:

• NPM and Node
• React
• HTML, CSS, and JavaScript
• ReactJS ChakraUI

Approach:

We designed four fundamental button components: Back, Next, Save & Next, and Mark for Review, commonly found in various exams. Then, we integrated the tooltip component from the Chakra UI library and positioned it for each of our four buttons, offering users detailed information about the respective actions.

Steps to Create the Project:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. my-app), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

Project Structure

The updated dependencies in package.json will look like this:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Below is the basic example of the Chakra UI Overlay Tooltip:

Steps to run the application:

npm start

Output:

Chakra UI Overlay Tooltip