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:
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:
Contact Us