JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="retailer-item">Open Tooltip
<span class="tooltip-content">Tooltip 1</span>
</div>
<div class="retailer-item">Open Tooltip
<span class="tooltip-content">Tooltip 2</span>
</div>
<div class="retailer-item">Open Tooltip
<span class="tooltip-content">Tooltip 3</span>
</div>
<div class="retailer-item">Open Tooltip
<span class="tooltip-content">Tooltip 4</span>
</div>
<div class="retailer-item">Open Tooltip
<span class="tooltip-content">Tooltip 5</span>
</div>
</div>
CSS
div.retailer-item{
position:relative;
margin-bottom:1em;
padding:0.5em 1em;
text-decoration:underline;
cursor:pointer;
}
span.tooltip-content{
display:none;
}
span.tooltip-content.show{
display:block;
position:absolute;
}
JavaScript
$(document).ready(function() {
$(".retailer-item").on('click', function() {
let chld = $(".retailer-item").children();
chld.removeClass("show");
$(this).children().toggleClass("show");
});
});