ReactJS MDBootstrap Tooltips Component

MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Tooltips Component in ReactJS MDBootstrap. Tooltips are used to provide interactive textual hints to the user about the element when the mouse pointer moves over.

Properties:

• tag: It is used to define the tag of the wrapper
• tooltipTag: It is used to define the tag of the tooltip element
• className: It is used to add a custom class to the tooltip
• wrapperClass: It is used to add a custom class to the tooltip wrapper
• wrapperProps: It is used to add custom properties to the tooltip wrapper
• options: It is used to allow to change the default Popper config.
• placement: It is used to set the position of the tooltip.
• title: It is used to define the tooltip text.

Syntax:

<MDBTooltip title='GeeksforGeeks'>
    Hover here
</MDBTooltip>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install ReactJS MDBootstrap in your given directory.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Step 4: Import the element to be used in the project.

import { MDBTooltip} from 'mdb-react-ui-kit'

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1: This is the basic example that shows how to use Tooltips Component.

App.js

import React from "react";
import { MDBTooltip } from "mdb-react-ui-kit";

export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Tooltip component</h4>

            <MDBTooltip wrapperProps={{ color: 'success' }}
                title='GeeksforGeeks'>
                Hover here!
            </MDBTooltip>
        </div>
    );
}

Output:

Example 2: In this example, we will know how to use placement property in a tooltip component.

App.js

import React from "react";
import { MDBTooltip } from "mdb-react-ui-kit";

export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Tooltip component</h4>

            <MDBTooltip placement="bottom"
                wrapperProps={{ color: 'success' }}
                title='GeeksforGeeks'>
                    Hover here!
            </MDBTooltip>
            <br />
            <br />
            <hr />
            <div id='a'>
                <MDBTooltip placement="left"
                    wrapperProps={{ color: 'success' }}
                    title='GeeksforGeeks' id='a'>
                        Hover here!
                </MDBTooltip>
            </div>
            <hr />
            <MDBTooltip placement="right"
                wrapperProps={{ color: 'success' }}
                title='GeeksforGeeks'>
                    Hover here!
            </MDBTooltip>
        </div>
    );
}

Index.css

#gfg{
    margin: 40px;
}
#a{
    margin-left: 120px;;
}

Output:

Reference: https://mdbootstrap.com/docs/b5/react/components/tooltips/