ReactJS Chakra-UI Tooltip

ToolTip is the way by which we can provide brief information about the element to which user interacts when they come around it. It works when the mouse hovers on any element. We can write information about that element so that users can know much better about that. The tooltip provided by Chakra UI makes it easier to use in production or in development too.

Prerequisites:

• NPM & Node.js
• React JS
• Html, CSS and JavaScript
• React JS Chakra UI

Approach:

We created the basic form having two input fields and a submit button, and then we used the Tooltip component from the Chakra UI library and placed it for our two input fields and the submit button.

Steps to create React Application And Installing Module:

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

npx create-react-app my-app

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

cd my-app

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 the package.json file.

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.1",
    "@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": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Example: Write down the code in respective files.

Javascript

// Filename - App.js

import { ChakraProvider, Text } from "@chakra-ui/react";
import Article from "./Article";
import "./App.css";

function App() {
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="600"
                my="1rem"
            >
                ToolTip By Chakra UI
            </Text>
            <Article />
        </ChakraProvider>
    );
}

export default App;

Javascript

// Filename - Article.js

import {
    Button,
    Flex,
    Input,
    Tooltip,
} from "@chakra-ui/react";

const Article = () => {
    return (
        <Flex justifyContent="center">
            <Flex
                w="full"
                direction="column"
                w="30%"
                alignItems="center"
            >
                <Tooltip
                    label="Your Email is not share with anyone"
                    fontSize="0.7rem"
                    bgColor="#2F8D46"
                >
                    <Input
                        placeholder="Enter your mail ID "
                        size="sm"
                        my="0.2rem"
                    />
                </Tooltip>
                <Tooltip
                    label="Your Password is safe"
                    fontSize="0.7rem"
                    bgColor="#2F8D46"
                    placement="top"
                >
                    <Input
                        placeholder="Enter your Password "
                        size="sm"
                        my="0.2rem"
                    />
                </Tooltip>
                <Tooltip
                    label="Welcome Back"
                    hasArrow
                    fontSize="0.7rem"
                    bgColor="#2F8D46"
                >
                    <Button
                        bgColor="#2F8D46"
                        borderRadius="1.5rem"
                        border="1px solid white"
                        fontSize="1rem"
                        fontWeight="500"
                        mt="1rem"
                        w="50%"
                        p="1rem"
                        color="white"
                        _active={{}}
                        _focus={{}}
                        _hover={{}}
                    >
                        Submit
                    </Button>
                </Tooltip>
            </Flex>
        </Flex>
    );
};

export default Article;

Step to run the application: Run the application using the following command:

npm run start 

Output: Now go to http://localhost:3000 in your browser:

ReactJS Chakra-UI Tooltip