JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<img style="width: 50px; height: 50px; display: block; z-index: 19;" src="spiral/sample1.jpg"></img>
<p></p>
<img style="width: 50px; height: 50px; display: block; z-index: 18;" src="spiral/sample2.jpg"></img>
<p>
<textarea id="photoData" rows="3" cols="50" tabindex="0">		
</textarea>

<div id="photoCaption" style="display: block; left: 720px; top: 218px; z-index: 20;"></div>

CSS

#photoCaption {
    position: absolute;
    float: left;
    background-color:black;
    color:white;
    min-width:100px;
    max-width:250px;
    height:auto;
}

img{
    position: relative;
}

textarea{
    display:none;    
}

JavaScript

var myPosters = ["This is a Title <br> This is a Description","Title 2"];
var textarea = document.getElementById("photoData"); textarea.value = myPosters.join("\n"); 

$('#photoCaption').text(myPosters[0]); //added to create the same effect as I have in my original code. It should be maintained!!

$('img').bind('mousemove', function (e) {
    if ($(this).css('z-index') == 19) {
        $('#photoCaption').css({
            display: 'block',
            left: e.pageX + 20,
            top: e.pageY,
            'z-index': 100
        });
    }
});

$('img').mouseout(function () {
    $('#photoCaption').css({
        display: 'none'
    });
});