ReactJS UI Ant Design Tooltip Component

Ant Design Library has this component pre-built, and it is very easy to integrate as well. Tooltip Component is used to display the information in the form of text when users focus on, hover over, or tap an element. We can use the following approach in ReactJS to use the Ant Design Tooltip Component.

Tooltip Props:

• title: It is used to describe the text which is shown in the tooltip.

Common Props: Following are some common props that are shared by Tooltip Popover and Popconfirm.

• align: It is used to merge this value into placement’s config.
• arrowPointAtCenter: It is used to indicate whether the arrow is pointed at the center of the target.
• autoAdjustOverflow: It is used to indicate whether to automatically adjust popup placement when the popup is off-screen.
• color: It is used to set the background color.
• defaultVisible: It is used to indicate whether the floating tooltip card is visible by default or not.
• destroyTooltipOnHide: It is used to indicate whether destroy tooltip when hidden.
• getPopupContainer: It is the DOM container of the tip.
• mouseEnterDelay: It is the value of delay in seconds before the tooltip is shown on mouse enter.
• mouseLeaveDelay: It is the value of delay in seconds before the tooltip is hidden on mouse leave.
• overlayClassName: It is used to pass the class name of the tooltip card.
• overlayStyle: It is used for the styling of the tooltip card.
• placement: It is used to position the tooltip relative to the target.
• trigger: It is used for the tooltip trigger mode.
• visible: It is used to indicate whether the floating tooltip card is visible or not.
• zIndex: It is used to denote the config z-index of Tooltip.
• onVisibleChange: It is a callback function that is triggered when the visibility of the tooltip card is changed.

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: After creating the ReactJS application, Install the required module using the following command:

  npm install antd

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import "antd/dist/antd.css";
import { Tooltip, Button } from 'antd';

export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Tooltip Component</h4>
      <Tooltip placement="bottom" title={"Hii, I am sample tooltip."}>
        <Button>Over me to see tooltip information!</Button>
      </Tooltip>
    </div>
  );
}

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

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://ant.design/components/tooltip/