JSFiddle - React, Tailwind, and code Playground

by Malcolm Hough

HTML

<div class="scroll" style="margin:0px auto">
 <b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
            <b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
            <b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
            <b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>

</div>

CSS

.popBox {

        margin: -50px 50px 0px 50px;
        z-index: 2;
        width: 60px;
        padding: 0.3em;
        border: 1px solid gray;
		position: absolute;
    }
    .images {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
div.scroll {
    background-color: #00FFFF;
    width:80px;
    height: 200px;
    overflow: scroll;
}

JavaScript

function showBox(text, obj) {

                helpNode = document.createElement('div');
                helpNode.id = 'popBox';
                helpNode.setAttribute('class','popBox');
                helpNode.innerHTML = text;
                obj.appendChild(helpNode);
            }

        function hideBox() {
            node = document.getElementById('popBox');
            node.parentNode.removeChild(node);
        }