JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="t"></textarea>
<br>
<span id="tooltip" style="background:yellow"></span>

CSS

textarea {
    height: 80px;
    line-height: 12px;
    overflow-y:scroll;
}
span {
 position: absolute;
}
}

JavaScript

$(document).ready(function () {
    var cols = document.getElementById('t').cols;
    var width = document.getElementById('t').clientWidth;
    var height = $('textarea').css('line-height');
    var pos = $('textarea').position();
    $('#t').on('keyup', function () {
        el = document.getElementById("t");
        if (el.selectionStart) { 
            selection = el.selectionStart; 
          } else if (document.selection) { 
            el.focus(); 
            var r = document.selection.createRange(); 
            if (r == null) { 
               selection = 0; 
            } 
            var re = el.createTextRange(), 
            rc = re.duplicate(); 
            re.moveToBookmark(r.getBookmark()); 
            rc.setEndPoint('EndToStart', re); 
            selection = rc.text.length; 
          } else { selection = 0 }
        var row = Math.floor((selection-1) / cols);
        var col = (selection - (row * cols));
        var x = Math.floor((col*(width/cols)));
        var y = (parseInt(height)*row);
        $('span').html("row: " + row + "<br>columns" + col + "<br>width: " + width + "<br>x: " + x +"px<br>y: " + y +"px<br>Scrolltop: "+$(this).scrollTop()).css('top',pos.top+y-$(this).scrollTop()).css('left',pos.left+x+10);
    });
});