JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child" title="It has been a very long text">
    </div>
</div>

CSS

#parent{
    position:absolute;
    width: 500px;
    height: 200px;
    background-color:#00f;
}

#child{
    position:absolute;
    left:400px;
    width: 500px;
    height:550px;
    background-color: #f00;
}
.tooltipclass{
    width: 50px;
    background-color: #ffffff;
    color: #000000;
}

JavaScript

$("#child").tooltip({
    track: true,
    tooltipClass: "tooltipclass",
    position: { my: "right top", at: "left bottom", collision: "flipfit", of:"#parent"}
});