JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://qtip2.com/v/2.2.0/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/2.2.0/jquery.qtip.min.css">
<div  id="con">
    <div id="hey">
        <br/>
            <br/>
<a href="#" id="hi" style="position:absolute;left:600px;">hello</a>

    </div>
</div>

CSS

.myCustomClass {
    border-color: rgb(0, 190, 0);
    background-color: #ddd;
}
#con {
    max-width:800px;
    max-height:500px;
}

JavaScript

$('#hi').qtip({

    position: {
        target: false,
        
        adjust: {

            method: 'invert invert',
        },
        viewport: $("#con")
    },
    content: {
        text: function (event, api) {
            $.ajax({
                url: '/echo/html/'
            })
                .then(function (content) {

                api.set('content.text', content);
            }, function (xhr, status, error) {
                api.set('content.text', status + ': ' + error);
            });

            return '<img src="http://www.keespeek.com/Assets/images/scoreIcons/preloader.gif"/>';
        }
    },
    tip: true 
});