Solution
To make button with tooltip in ant design in react js, first install ant design library using npm install antd
command import and use the button
component from it. You have to use the button
component in the tooltip
component. Then the tooltip will show on the button.
Snippet
In this snippet, see the short example to use button
component of ant design library, with the use tooltip component
with the title
prop set to text
. The button component uses the type
prop set to primary
.
<Tooltip placement="bottom" title={text}>
<Button type="primary">Bottom</Button>
</Tooltip>
Example
In this example, we will import the button
and tooltip
component from the ant library. The constant “text” specifies a value to create the tooltip and a tooltip component
to create the tag below the button. A tooltip will appear when the user hovers the mouse over the button.
Let’s start coding…
App.js
import { Button, Tooltip } from 'antd'
const text = <span>prompt text</span>;
const App = () => (
<Tooltip placement="bottom" title={text}>
<Button type="primary">Bottom</Button>
</Tooltip>
);
export default App;
Output
Links
Here, we are provided code sandbox links for the above program to make a button with a tooltip in ant design. 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.