Chakra UI Overlay Tooltip

Last Updated : 24 Apr, 2025

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:

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:

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:

JavaScript

// App.js File

import React from 'react';
import {
    ChakraProvider, HStack,
    Button, Tooltip
} from '@chakra-ui/react';

function App() {
    return (
        <ChakraProvider>
            <HStack spacing={4}
                align="center" p={4}>
                <Tooltip label="Go back to the previous Question"
                    placement="top">
                    <Button colorScheme="teal">
                        Back
                    </Button>
                </Tooltip>

                <Tooltip label="Proceed to the next Question"
                    placement="top">
                    <Button colorScheme="teal">
                        Next
                    </Button>
                </Tooltip>

                <Tooltip 
                    label="Save and move to the next Question"
                    placement="top">
                    <Button colorScheme="teal">
                        Save & Next
                    </Button>
                </Tooltip>

                <Tooltip 
                    label="Mark this Question for later review and Go To Next"
                    placement="top">
                    <Button colorScheme="teal">
                        Mark for Review
                    </Button>
                </Tooltip>
            </HStack>
        </ChakraProvider>
    );
}

export default App;