JSFiddle - React, Tailwind, and code Playground

HTML

<a class="button" href="#" data-tooltip="Tooltip 1">Download
    <div class="tooltip"></div>
</a>
<a class="button" href="#" data-tooltip="Tooltip 2">Download
    <div class="tooltip"></div>
</a>

CSS

body {
   margin: 40px 0 0 0;
}
a.button {
    background: fff;
    width:100px;
    position: relative;
    border: 3px solid #FF5E3C;
    border-radius: 6px 6px 6px 6px;
    color: #FF5E3C;
    display: inline-block;
    font-weight: 600;
    padding: 0.8em 1em;
    font-family:arial;
    text-decoration:none;
    margin:5px;
}
.tooltip {
    position: absolute;
    background: blue;
    height: 30px;
    top: -40px;
    line-height: 30px;
    padding: 0 5px;
    display: none;
}

JavaScript

$(document).ready(function(){

    $('a.button').on('mouseenter', function(){
        $('div.tooltip').hide();
        var content = $(this).data('tooltip');
        $(this).children().text(content).show();
    });
    
    $(document).on('click', function(){
          $('div.tooltip').hide();        
       });
                   
                   
     });