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) {
    var msg = e.target.getAttribute("data-msg");
    if (msg) {
        document.getElementById("displayText1").innerHTML= msg;
        document.getElementById("displayText").style.visibility='visible';
    }
}
function doMouseOut() {
    document.getElementById("displayText").style.visibility='hidden';
}

document.addEventListener("mouseover", doMouseOver);
document.addEventListener("mouseout", doMouseOut);