JSFiddle - React, Tailwind, and code Playground

HTML

<div id="out-section">
    <div class="why-out" id="out-head">WHAT'S OUT</div>
    <br/>
    <div class="why-out" id="gluten">Gluten/Grain /OUT</div>
    <br>
    <div class="why-out" id="dairy">Dairy /OUT</div>
    <br>
    <div class="why-out" id="soy">Soy /OUT</div>
    <div class="why-out" id="gmo">GMO's /OUT</div>
    <div class="why-out" id="preservatives">Preservatives /OUT</div>
    <div class="why-out" id="fillers">Fillers /OUT</div>
    <div class="why-out" id="sugars">Refined Sugars /OUT</div>
</div>
<div class="why-out hide" id="why-out-pop">
    <p>This is a test</p>
</div>

CSS

.hide {
    visibility: hidden;
}
#why-out-pop {
    position: absolute;
    margin-top: -158px;
    margin-left: 30px;
    border-style: solid;
    border-width: 3px;
    border-radius: 40px;
    border-color: black;
    background-color: #c3c3c3;
    padding: 10px;
    color: black;
    text-align: right;
    font-weight: light;
    z-index: 1000;
}
.why-out {
    text-align: right;
    font-weight: bold;
}
#out-head {
    text-align: right;
    font-weight: bold;
}
</style>

JavaScript

$(document).ready(function () {
    var buildHtml = function (id) {
        return '<p>This is why ' + id + ' sucks</p>';
    };
    $(".why-out").hover(function () {
        var html = buildHtml(this.id);
        $('#why-out-pop').empty().append(html).removeClass('hide');
    }, function () {
        $('#why-out-pop').html('').addClass('hide');
    });
});