Solution
To show tooltip with ant design checkbox in react js, first, install ant design library using npm install antd
command, import and use the checkbox
within Tooltip
then it will show tooltip with ant design checkbox.
Snippet
In this snippet, see small example for using Checkbox
component of Ant design library, Contains the text to be displayed in the tooltip, with use of tooltip component that takes a title
prop.
<Tooltip title={tooltipText}>
<Checkbox>My Checkbox</Checkbox>
</Tooltip>
Table of contents
- Install Ant Design.
- Import Checkbox and Tooltip components.
- Create Tooltip content.
- Wrap Checkbox component with Tooltip component.
Step 1: Install Ant Design.
The first step is to install Ant Design in your ReactJS project. you can use this code npm install antd
.
Step 2: Import Checkbox and Tooltip components.
You need to import the Checkbox and Tooltip components from the Ant Design library.
import { Checkbox, Tooltip } from 'antd';
Step 3: Create Tooltip content.
Now, you have to create the content that will appear in the tooltip.
const tooltipText = 'This is a tooltip';
Step 4: Wrap Checkbox component with Tooltip component.
You can wrap
the Checkbox component with the Tooltip component and pass the title
prop to the Tooltip
component with the tooltipText
value.
<Tooltip title={tooltipText}>
<Checkbox>My Checkbox</Checkbox>
</Tooltip>
Example
In this example, we will import the Checkbox
component from the Ant library. Create ant design checkbox tooltip
component using this code title={tooltiptext}
.
Let’s start coding…
App.js
import React from "react";
import { Checkbox, Tooltip } from 'antd';
export default function App() {
const tooltipText = 'This is a tooltip';
return (
<Tooltip title={tooltipText}>
<Checkbox>My Checkbox</Checkbox>
</Tooltip>
);
}
Output
Links
Here, we are provided code sandbox links for the above program to show tooltip with ant design checkbox. Then you can use whenever you went and do the changes as per your requirements
Happy Coding,
I hope the above example with help you to do your task.