JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tooltip"> <a href="#" class="show">Open tooltip 1</a>

    <div class="text">
        <p>Tooltip 1 stuff goes here...</p> <a href="#" class="hide">Close</a>

    </div>
</div>
<div class="tooltip"> <a href="#" class="show">Open tooltip 2</a>

    <div class="text">
        <p>Tooltip 2 stuff goes here</p> <a href="#" class="hide">Close</a>

    </div>
</div>
<div class="tooltip"> <a href="#" class="show">Open tooltip 3</a>

    <div class="text">
        <p>Tooltip 3 stuff goes here</p> <a href="#" class="hide">Close</a>

    </div>
</div>

CSS

.text {
    display: none;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    width: 100px;
    margin-top: 10px;
    padding: 10px;
    position: absolute;
}
.tooltip {
    margin-bottom: 15px;
    display: inline-block;
    margin-right: 60px;
}

JavaScript

$(document).ready(function () {
    $(".tooltip .show").hover(function () {
        $(this).parent().find(".text").show();
    });
    $(".tooltip .hide").click(function () {
        $(this).parent().hide();
    });
});