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

Ant-design, button

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

codesandbox

Happy Coding,

I hope the above example with help you to do your task.