This article focuses on the Tooltip component of Material UI. It would start by explaining what the component is and why you should use it in a React Application. After that, the article will teach how to import the tooltip element, a few useful props it has, how to set a tooltip’s position, and how to disable it in certain cases. Finally, this article will examine how to control the interaction a user has with a Tooltip, and properly manage the timing. But before that, are you aware of the developer tool named PureCode? PureCode is an online marketplace where you can download already-styled components for your projects. It saves time for developers as it contains thousands of customizable components that fit every type of need. Visit PureCode now to check the tool out. Prerequisites to this article include knowledge of HTML, CSS, JavaScript, and the basics of React. Those are technologies used throughout the article. If you have the prerequisites, then get ready let’s go. MATERIAL UI REACT TOOLTIP 26 Sep 2023 11 min read What is Material UI? Material UI is a popular React open-source Component Library that implements Google’s Material Design. Here is a video explaining Material Design shortly: Material UI comes with valuable components for React like buttons, modals, form elements, and more. Developers easily import and use components from this library for their projects. What is the Material UI Tooltip Component Before encountering the Material UI Tooltip, a developer might have come across the `title` attribute in HTML: <a href="https://google.com" title="Google">Navigate to a Website</a> In the example above, whenever a cursor hovers on “Navigate to a Website”, a small label appears on top of the element with the text “Google”. The ‘ title ‘ attribute makes that text label identifying the element possible. That label is an example of a Tooltip. The Material UI Tooltip is a component that displays informative text when users hover over, focus on, or tap on an element. Material UI takes the HTML `title` functionality further by having a component that performs this function and more. Material UI’s Tooltip has improved styling and is more versatile and customizable than the primitive `title` HTML attribute. Why should you use a Tooltip? There are many reasons why Websites use Tooltips. This section highlights some of them: Clarification: Some user interface elements need further clarification for their function to be understood in full. Sometimes a program might also need to convey extra information to the user but at the same time not cluttering the user interface. In this case, a tooltip can solve that problem. Labelling Icons: An Icon Button is a button that has no text, only a clickable icon. For someone unfamiliar with those icons, a Tooltip is helpful to show what the icons represent, and a lot of websites take advantage of this. Keyboard Shortcuts: If a button in an application has a keyboard shortcut, a tooltip is a clever way of letting users know about this. As you can see, Tooltips have practical uses in a user interface. They are always a good feature for building intuitive and accessible user interfaces. How to import the Material UI Tooltip Before importing the Material UI Tooltip component, there are a few steps to take. These steps are listed below: 1. Make sure you are running a React App: As mentioned earlier, Material UI is a React Component Library, and so to use it you must be running React. You can easily start up React using Vite to continue. 2. Install the Material UI Library: Working with Material UI requires installing it into the React Application you already created. Use this guide to install the MUI library into your project. 3. Import the Tooltip component into the needed file: The tooltip element comes from the Material UI Library, which you import using this instruction below. import { Tooltip } from '@mui/material'; 4. Wrap it around an element: The MUI Tooltip is extremely easy to use. The way to use it is to wrap it around an existing component and give it a `title` prop. By just doing that, you have set up the tooltip component. import { Button, Tooltip } from "@mui/material"; function App() { return ( <Tooltip title="Click to Submit Form"> <Button variant="contained">Submit</Button> </Tooltip> ); } export default App; Here is the output of the code block above: Material UI Tooltip Props As mentioned earlier, the Material UI Tooltip component extends the functionality of the `title` attribute present in HTML, improving the styling, and making it further customizable. For Material UI to achieve this, it provides some props developers can use with the component. This section of the article will look into the most basic props. children prop Every `Tooltip` must have an element it refers to. The Tooltip’s children are the components that the user hovers, focuses on, or taps to show the tooltip. Wrap the `Tooltip` around an element to make the element a child of the Tooltip: <Tooltip title="Click to Submit Form"> <Button variant="contained">Submit</Button> </Tooltip> From the example above, Tooltip accepts children, and the child element is a Material UI Button. title prop Tooltips display informative text. Developers can specify this informative text using the `title` prop. Without this prop, nothing would be displayed when users perform one of the activities that trigger a tooltip. arrow prop The `arrow` prop serves as a tooltip pointer. It points toward the component the tooltip belongs to. Using this prop minimizes confusion, especially in a scenario where there are so many tooltips on the page. <Tooltip title="Click to Submit Form" arrow> <Button variant="contained">Submit</Button> </Tooltip> followCursor prop The `followcursor` prop makes the tooltip move around when someone hovers over an element and moves the cursor. Add the `followCursor` prop to a `Tooltip`to use it. <Tooltip title="Click to Submit Form" followCursor> <Button variant="contained">Submit</Button> </Tooltip> How to set Tooltip Position One of the many customizations a developer can make to a Tooltip is setting its position. There are 12 placements or positions for the `Tooltip`, they are `top`, `right`, `left`, `bottom`, `top-start`, `top-end`, `right-start`, `right-end`, `left-start`, `left-end`, `bottom-start`, and `bottom-end`. The example below places a `Tooltip` on the `left-end`. Use the `placement` prop to set a position: <Tooltip title="Click to Submit Form" placement="left-end"> <Button variant="contained">Submit</Button> </Tooltip> How to set Material UI Tooltip Triggers This set of props once activated helps to disable some default features that come with Material UI Tooltips. This article has established that a Tooltip will display on hover, on focus, or on a tap of an element it refers to. However, some of these behaviors can be disabled. To disable the `Tooltip` when users hover over an element that has one, use the `disableHoverListener` prop. This prop will prevent the hover from triggering the `Tooltip`. Also, use the `disableFocusListener`, and `disableTouchListener` to prevent a focus or touch from triggering the tooltip respectively. Below is an example that disables a hover trigger: <Tooltip title="Click to Submit Form" disableHoverListener> <Button variant="contained">Submit</Button> </Tooltip> How to control Interaction in Material UI Tooltip The Material UI Tooltip allows developers some control over the interaction users have with it. It allows the developer to attach DOM event listeners to a `Tooltip` they can use to run commands when specific events occur. Here are some `Tooltip` props that help with this. open prop The `open` prop is optional by default and will cause the `Tooltip` to display when its value is `true`. It helps to set conditions when opening or hiding the tooltip is necessary. The illustration below will show a `Tooltip` at the click of a button. import { useState } from "react"; import { Button, Tooltip, Box } from "@mui/material"; function App() { const [open, setOpen] = useState(false); const handleClick = () => { setOpen((prev) => !prev); }; return ( <Box sx={{ mt: 5, display: "flex", justifyContent: "center" }}> <Tooltip title="Click to Submit Form" open={open}> <Button variant="contained" onClick={handleClick}> Submit </Button> </Tooltip> </Box> ); } export default App; This is the behavior the code implements: onOpen and onClose prop The `onOpen` prop accepts a function that will run whenever the `Tooltip` is open. Similarly, the `onClose` prop accepts a function that will run whenever users try to close the `Tooltip`. For instance, the code below logs information into the console when users open and close the Tooltip. import { Button, Tooltip, Box } from "@mui/material"; function App() { const handleOpen = () => { console.log("This Tooltip has been closed"); }; const handleClose = () => { console.log("This Tooltip has been closed"); }; return ( <Box sx={{ mt: 5, display: "flex", justifyContent: "center" }}> <Tooltip title="Click to Submit Form" onOpen={handleOpen} onClose={handleClose} > <Button variant="contained">Submit</Button> </Tooltip> </Box> ); } export default App; How to create a Tooltip custom React Element Developers can use the Material UI Tooltip to create a custom React Element with added styling. This means that customizing the default styles in a `Tooltip` is possible. There are a few steps to take to achieve this: 1. Import `styled` from the Material UI Library Importing the `styled` utility from Material UI is the first step to customizing a Tooltip. This utility is useful for styling components and all Material UI components use it behind the scenes. import styled from '@mui/material/styles'; 2. Import `tooltipClasses` from Material UI To style a `Tooltip`, you need to know the class names of the Tooltip parts. `tooltipClasses` is an object that contains all those class names so you just have to import it. import { tooltipClasses } from '@mui/material/Tooltip'; 3. Style the custom componentUsing both `styled` and `tooltipClasses`, you can style components with this format: import { Button, Box, Tooltip, tooltipClasses, styled } from "@mui/material"; const CustomTooltip = styled(({ className, ...props }) => ( <Tooltip {...props} classes={{ popper: className }} /> ))(({ theme }) => ({ [`& .${tooltipClasses.tooltip}`]: { backgroundColor: theme.palette.primary.light, color: "rgba(0, 0, 0, 0.87)", boxShadow: theme.shadows[1], fontSize: 11, }, })); function App() { return ( <div> <Box sx={{ mt: 8, display: "flex", justifyContent: "center" }}> <CustomTooltip title="This is a Customized Tooltip"> <Button variant="contained">Custom Tooltip</Button> </CustomTooltip> </Box> </div> ); } export default App; Here is the new Customized Tooltip: With these few steps, you can give a tooltip a custom width, height, color, and many more. Timing a Tooltip Display Timing is an important concept to discuss when it comes to a `Tooltip`. By default, Material UI has set the number of milliseconds it takes before showing and hiding the tooltip, among others. However, as with most features in this library, it is easily customizable. This section will look into props that allow a developer to do this. Props Description Default Value enterDelay The number of milliseconds to wait before showing a tooltip 100 enterTouchDelay The number of milliseconds a touch must hold to show the tooltip 700 enterNextDelay The number of milliseconds to wait before showing a tooltip if one is already open 0 leaveDelay The number of milliseconds to wait before hiding the tooltip 0 leaveTouchDelay The number of milliseconds to wait after the user stops touching an element before hiding it 1500 For instance, if you wanted the `Tooltip` to only close after one second, this is how you would do it: <Tooltip title="submit form" leaveDelay={1000}> <Button variant="contained">Submit</Button> </Tooltip> Material UI Tooltip Transitions Material UI is a very robust library that tries to include valuable modern User Interface elements. These are elements that make sure the interface looks and works in a smooth manner. One set of those elements is transitions. A Transition is the process of a component changing from one state to another. In Material UI, transitions are components that bring about smooth behavior when something on the page changes from one state to the other. These transitions also have props developers can use to further modify or customize their behavior. The `Tooltip` prop for adding a transition is `TransitionComponent`. This is a more convenient way to combine Material UI Tooltips with transitions, instead of wrapping a transition around a Tooltip. However, transitions are React components that accept props, so use `TransitionProps` to add those props in the `Tooltip`. This section of the article will discuss some transition components you can use with Tooltips, and how to add these transitions. Grow Transition `Grow` is the default animation for Tooltips. It is a transition that expands a tooltip into its position, while at the same time fading it in. It has a `timeout` prop used for specifying the duration of the transition in milliseconds. The default value of this prop is `’auto’` which calculates the transition time automatically based on the height of the `Tooltip`. Here is an example of a `Grow` transition with a timeout of 500 milliseconds. First of all, import the `Grow` component from the Material UI. import { Grow } from "@mui/material"; After that, use the `TransitionComponent` and `TransitionProps` props of a Tooltip. <Tooltip title="Hello there!" TransitionComponent={Grow} TransitionProps={{ timeout: 500 }} > <Button variant="contained">Button</Button> </Tooltip> Fade Transition Another transition that works well with Tooltips is the `Fade` transition. It is a transition that fades in from a transparent tooltip to an opaque one. The timeout prop also works for this transition. Here is an example of its usage: import { Fade } from "@mui/material"; <Box sx={{ mt: 8, display: "flex", justifyContent: "center" }}> <Tooltip title="Hello there!" TransitionComponent={Fade} TransitionProps={{ timeout: 500 }} > <Button variant="contained">Button</Button> </Tooltip> </Box> Zoom Transition Finally, the `Zoom` transition in Material UI is a transition that starts off very tiny and stretches out to scale. The `timeout` prop works in this transition too. To use it, import it from the Material UI Library first: import { Zoom } from "@mui/material"; Then apply it to a `Tooltip`: <Tooltip title="Hello there!" TransitionComponent={Zoom} TransitionProps={{ timeout: 500 }} > <Button variant="contained">Button</Button> </Tooltip> Things to Lookout for When Using a Tooltip There are a few things you might want to consider when using a Tooltip. Tooltips are important user interface additions, but when overused, or not used properly, can pose a challenge. This section of the article will discuss some of the downsides of Tooltips, and how to avoid them. Limited Visibility: Tooltips are usually small, and appear for a limited time before they go back into hiding. Because of this behavior, users might miss the content of the Tooltip thus posing a challenge. This is especially true when the tooltip is set to have a very short display time. This condition is not ideal and is a scenario developers should avoid. To solve this problem, you should make the display time of the tooltip enough for the user to notice and read its content. Also, make sure the tooltip is not so tiny that it is hard to see clearly. Length of Content: A Tooltip should be able to pass information across to the user in a straightforward manner. When the tooltip’s content is very long, it becomes overwhelming to the user who might not be expecting so much information. To avoid this, make a Tooltip’s content short and straight to the point. If the application has to pass a lengthy informative text to a user, then a Tooltip may not be the best solution to that problem. Using another strategy like a modal might be the better choice. User Interface Clutter: Another thing to look out for when using Tooltips in an application is overuse. When Tooltips are overused in a User Interface, they lead to clutter. If Tooltips are popping up everywhere the user hovers or clicks on, the user interface might no longer feel intuitive and make the user exit the application. Use Tooltips when they are absolutely necessary, and make sure they fit in nicely with the rest of the interface. That way, you will avoid Tooltip user interface clutter. Try Using Material UI Tooltip As the article teaches, Tooltips display informative text when a user hovers, focuses or taps on an element. This functionality is very useful in building intuitive user interfaces, and Material UI provides developers with a highly customizable `Tooltip` component. You can also find most of the things this article covered in this video: This article starts by defining the Material UI Tooltip component and why you might want to use it. After that it teaches how to install it, the basic props it requires, setting the position, customizing it, and a lot more. Don’t forget to check out PureCode, the tool that gives developers already-styled components for their projects, and saves them time. Resources For further study on the subject, check out the following resources: Tooltip API Customizing Material UI Components ‘Original article published here’
Topics
