JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://qtip2.com/v/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/nightly/jquery.qtip.css">
 teeeeeesssssst<a href="#test">Sample link</a>
<!--<div class="tooltiptext">
    Complex <b>inline</b> <i>HTML</i> in your <u>config</u>
</div>-->
<div class="toltip-div">
  <div class="toltip-top">
    <div class="toptip-close"><a href="#"><img src="images/toptip-close.png" width="13" height="13" /></a></div>
   <div class="toltip-area">You can set change</div>
  </div>
</div>

CSS

body{
    padding: 150px;
}
.toltip-div{
    display: none;
}
.toltip-div{
    height: 144px;
    margin: 0 auto;
    padding: 0;
    width: 280px;
}
.toltip-top{
  
    float: left;
    height: 153px;
    padding: 0;
    width: 258px;
}
.toltip-area{
    color: #7F7F7F;
    float: left;
    font-family: 'open_sanssemibold_italic';
    font-size: 15px;
    height: 110px;
    margin: 0 auto;
    padding: 18px 0 0 32px;
    width: 227px;
}
.toptip-close{
    float: right;
    height: 13px;
    margin: 9px 8px 0 0;
    width: 13px;
}

.qtip-gray { background:#CCC; }

JavaScript

// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').each(function() {
         $(this).qtip({
             content: {
                 text: $(this).next('.toltip-div')
             },
             position: {
                my: 'right center',  
                at: 'top left', 
            },
             style: {
                classes: 'qtip-gray'
            }
         });
     });
 });