JSFiddle - React, Tailwind, and code Playground

HTML

<br /><br /><br /><br /><br /><br /><br /><br/><br /><br/>
<div class="greet">.</div>
<div class="ht">HINT</div>
<p>asdasdasdasdasdas</p>
<div class="ht">HINT</div>
<p>asdasdasdasdasdas</p>
<div class="ht">HINT</div>
<p>asdasdasdasdasdas</p>

CSS

a , .ht {cursor: pointer}
.ht {
    display: inline-block;
    width: 6em;
    line-height: 2em;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    margin: auto;
    color:#FFF;
    border-radius: .4em;
    -webkit-box-shadow:hsl(75, 80%, 15%) 0 .38em .08em;
    box-shadow:hsl(75, 80%, 15%) 0 .38em .08em;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    background:#749A02;
}

.greet {
    display: none;
    position: absolute;
    width: 6em;
    line-height: 2em;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    color:#FFF;
    border-radius: .4em;
    background:#000;
}

JavaScript

// Hint button
$('.ht').click(function hint() {
    var offset = $(this).hide(500).offset();
    console.log(offset);
    var score = 'Hello';
    $('.greet').text(score);
    
    $('.greet')
          .show();
          console.log(offset.top - $('.greet').height());
          $('.greet')
          .css({
              top: offset.top - $('.greet').height(),
              left: offset.left,
              opacity: 1,
          })
          .stop()
          .delay(200)  
          .animate({top: 20, opacity: 0},1000);
});