JSFiddle - React, Tailwind, and code Playground

by tapas_23571113

HTML

<textarea id="txtArea" class="txtArea" onmouseover="mouseMovedOnTextBox();"></textarea>
        <div class="div" id="hiddenDiv"></div>
        <label id="lbl"></label>

CSS

.div {
                height:35px; 
                width:176px; 
                border:1px solid #999; 
                margin-bottom:1em;
            }
            .hidden {
                position: relative;
                display: none;
                top: -50px;
                left: 5px;                
            }            
            .txtArea {
                height:35px; 
                width:176px;
                resize: none;
            }
            .span {
                margin-left: 1px;
                margin-right: 1px;                
            }

JavaScript

function mouseMovedOnTextBox() {
    var txtArea = document.getElementById("txtArea");
    var hiddenDiv = document.getElementById("hiddenDiv");
    var newHtml = "";
    var words=txtArea.value.split(" ");
    for (i = 0; i < words.length; i++) {
        newHtml += '<span class="span" onmouseover="mouseMovedOnSpan(\'' + words[i] +'\');">' + words[i] + '</span> ';
    }
    hiddenDiv.innerHTML=newHtml;
} 

function mouseMovedOnSpan(word) {
    document.getElementById("lbl").innerHTML=word;
}