Not able to add Tippy for a button in react js

Question

I have imported below packages and I tried referring to the below link, which I did not understand where to place tippy code. Please help me.

https://atomiks.github.io/tippyjs/html-content

import React from 'react';
import ReactDom from 'react-dom';
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

class Trial extentds Component {
    render(){
        return(
            <div>
                <Button onClick={this.submitTaggedFace} disabled={!this.validate()} variant="contained" color="primary"
                data-tippy="Tooltip"
                data-tippy-animation="scale"
                data-tippy-duration="0"
                data-tippy-arrow="true"
                data-tippy-delay="[800, 200]"
                >Click to Tag</Button>
            </div>
        )
    }
}

Answer 1

There is nothing wrong with your code. You must be missing something in other component.

I have created this codesandbox example:

https://codesandbox.io/s/5y8zm52own