React MUI Tooltip Display

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Tooltip Display. A tooltip displays the informative text when users hover over, focus on, or tap an element. It can also be customized, positioned in different styles, hide or show, etc.

React MUI Tooltip Display Variants:

• Basic tooltip: It is a default variant of the tooltip.
• Positioned tooltip: The tooltip can be positioned in 12 ways. 
• custom tooltip: The tooltip can be customized as per requirement.
• arrow tooltip: The tooltip may contain an arrow indicating which element it refers to.
• custom child element: The tooltip needs to apply DOM event listeners in its child element.  
• triggers: We can define different types of trigger events that cause the tooltip to show. 
• controlled tooltip: Props like open, onOpen, and onClose can control the behavior of the tooltip.
• variable width: The tooltip width can be changed and wraps long text to make it readable. 
• interactive: The tooltip behavior is interactive by default and may get disabled if requires. 
• Disabled elements: The disabled elements also show the tooltip.
• Transitions: We can use different transitions lime grow, fade, and zoom.
• Follow cursor: If the followCursor prop is true, the tooltip will follow the cursor.
• showing and hiding: The enterDelay and leaveDelay props may be used to delay showing or hiding the tooltip.
• Accessibility: If we want the tooltip to act as an accessible description we can use describeChild prop.
• API: The API used for Tooltip is <Tooltip />.

Syntax:

<Tooltip title="Tooltip">
      <button>Click</button>
</Tooltip>

Creating React Project:

Step 1: To create a react app, you need to install react modules through npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI arrow tooltip with different alignments. In the given example, we have demonstrated the tooltip components that have an arrow and are aligned in different alignments.

Javascript

import React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";

function App() {
    return (
        <div>
            <div style={{
                textAlign: "center",
                color: "green"
            }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Tooltip Display</h2>
            </div>
            <center>
                <Box sx={{ width: 500 }}
                    justifyContent="center">
                    <Tooltip title="Add"
                        placement="top" arrow>
                        <Button>top</Button>
                    </Tooltip>
                    <Tooltip title="Add"
                        placement="left" arrow>
                        <Button>left</Button>
                    </Tooltip>
                    <Tooltip title="Add"
                        placement="right" arrow>
                        <Button>right</Button>
                    </Tooltip>
                    <Tooltip title="Add"
                        placement="bottom" arrow>
                        <Button>bottom</Button>
                    </Tooltip>
                </Box>
            </center>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI tooltip component. In the given example, we have defined different types of tooltip trigger events i.e, hover or touch, hover, and follow the cursor. Apart from this, we have also given the example of a disabled button that does not trigger the user interactions therefore the tooltip is not activated on events like hover.

Javascript

import React from "react";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import { Box } from "@mui/material";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks</h1>
                <h2>React MUI Tooltip Display</h2>
            </div>
            <center>
                <Box justifyContent="center">
                    <Tooltip disableFocusListener
                        title="GeeksforGeeks">
                        <Button>Hover or touch</Button>
                    </Tooltip>
                    <Tooltip
                        title="GeeksforGeeks"
                    >
                        <Button>Hover</Button>
                    </Tooltip>
                    <Tooltip title="This button is disabled">
                        <span>
                            <Button disabled>
                                Disabled Button
                            </Button>
                        </span>
                    </Tooltip>
                    <Tooltip title="Follow me" followCursor>
                        <span>
                            <Button>Follow tooltip</Button>
                        </span>
                    </Tooltip>
                </Box>
            </center>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-xui/react-tooltip/