JSFiddle - React, Tailwind, and code Playground

HTML

<img src="images/img1.jpg" id="img1" data-msg="Hi, How r u?" width="100" height="100">
<img src="images/img2.jpg" id="img2" data-msg="Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up?" width="100" height="100">
<img src="images/img3.jpg" id="img3" data-msg="Hello, whats going on?" width="100" height="100">
<img src="images/img4.jpg" id="img4" data-msg="Hi friends" width="100" height="100"><br/>

<div id="displayText">
<span id="displayText1"></span>
</div>

JavaScript

function doMouseOver(e) {
    document.getElementById("displayText1").innerHTML=e.target.getAttribute("data-msg");
    document.getElementById("displayText").style.visibility='visible';
}
function doMouseOut() {
    document.getElementById("displayText").style.visibility='hidden';
}

var imgs = document.getElementsByTagName("img"),
    i;
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener("mouseover", doMouseOver);
    imgs[i].addEventListener("mouseout", doMouseOut);
}