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 hovered on any element. We can write information about that element so that users can know much better about that. Tooltip provides by chakra UI makes it easier to use in production or in development too.
Prerequisites:
- Basic knowledge of reactjs.
- Html, css and javascript with ES6 syntax.
- NodeJs should be installed in your system (install).
Approach: We have created the basic form having two input fields and a submit button, and then we have used the Tooltip component from the Chakra UI library and placed it for our two input fields.
Creating 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: It will look like this. We have create Article.jsx file.
Example: Write down the code in respective files.
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; |
Article.jsx
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
Reference: https://chakra-ui.com/docs/overlay/tooltip
