ReactJS Chakra-UI Tooltip
Last Updated :
13 Nov, 2023
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;
// 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
Similar Reads
Chakra UI Overlay Tooltip 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 NodeReactHTML, CS
2 min read
Chakra UI Feedback Toast Chakra Feedback Toast allows developers to display brief, non-intrusive messages to users. The Chakra toast is designed to provide lightweight feedback about an operation or notification. For example, a toast can alert a user that their settings were saved successfully after submitting a form. Toast
3 min read
React Chakra UI Other Transitions React Chakra UI has a Transition component which has types like Fade, ScaleFade, SlideFade, and Collapse. All these types provide animation effects and smooth transitions in the application. By using the transition types in the application, the appearance of the elements is enhanced and the applicat
3 min read
React Chakra UI Other Chakra UI is a useful tool that allows users to design appealing and practical websites and applications in a quick and easy way. It provides a variety of ready-to-use components that can be personalized and adjusted to meet different project needs, thus streamlining web development and making it mo
6 min read
How to Implement Chakra UI in ReactJS ? Chakra UI is a powerful component library for React that is designed and developed by Segun Adebayo to build front-end applications. The Chakra UI comes with simple yet easy-to-understand documentation that gives us guidelines on how to build a reusable component, thereby reducing the time spent on
3 min read
React Chakra UI Form Switch Chakra UI Form Switch is a component provided by Chakra UI for creating toggle switches in React applications. It is an alternative to checkboxes, allowing users to switch between enabled and disabled states. Using the props of the Chakra UI Form Switch we can customize its appearance by changing th
3 min read
Chart.js Tooltip Configuration When a user hovers over a data point in Chart.js, tooltips are visual UI components that offer additional information about the data point. By default, tooltips will show the label and value of the data point, but you may edit them to alter their appearance (styles) or to show different information
5 min read
React Chakra UI Typography Heading Chakra UI Typography Heading Component is used to display headings around the web application. Internally, the Heading Component renders HTML heading tags which can be customized using the as prop of the Heading Component. The as prop take values h1, h2, h3, h4, h5 and h6. Additionally, we can chang
3 min read
Chakra UI Typography Text Chakra UI Typography Text is used to render text and paragraph inside web application. The Text component renders HTML paragraph tag internally. The size of the Text can be controlled using the fontSize prop of the component that can take any of the following values: xs, sm ,md, lg, xl, 2xl, 3xl, 4x
2 min read
React Chakra UI Filter React Chakra UI Filter is the component that is used to apply filter and backdrop filters to the various elements. Using this component, we can adjust the grayscale, blur, brightness, contrast, and more properties of the elements. The simple Image can be adjusted in various appearances by controllin
3 min read