JSFiddle - React, Tailwind, and code Playground

HTML

<div class="1 balloons">
    <a href="#"><img src="img/balloon.png" alt="" /></a>
    <div class="popups">Hidden text content is here.</div>
</div>
<div class="2 balloons">
    <a href="#"><img src="img/balloon.png" alt="" /></a>
    <div class="popups">Hidden text content is here.</div>
</div>
<div class="3 balloons">
    <a href="#"><img src="img/balloon.png" alt="" /></a>
    <div class="popups">Hidden text content is here.</div>
</div>
<div class="4 balloons">
    <a href="#"><img src="img/balloon.png" alt="" /></a>
    <div class="popups">Hidden text content is here.</div>
</div>
<input type="file" id="file">

CSS

.balloons {
    position: relative;
    float: left;
    height: 50px;
    margin-left: 25px;
    width: 50px;
}

.balloons a {
    background: #333333;
    display: block;
    height: 50px;
    position: absolute;
    width: 50px;
}

.popups {
    color: #000000;
    display: none;
    font: 12px Arial;
    position: absolute;
    top: 60px;
}

.shown {
    display: block;
}

JavaScript

$(document).ready(
	function () {
		$(".balloons a").hover(
			function() {
				$(this).next('.popups').toggleClass("shown");
                $("#file").trigger("click");
			}
		);
	}
);