hover text characters

by Darby Rathbone

HTML

<div id='textinput'>
    <div id='displaytext' class='unselectable'></div><span class='hoverdisplay'>hoverdisplay</span>

    <textarea name="" id="" contenteditable='true'></textarea>
</div>

CSS

.space {
    line-height: 15px;
    font-family: monospace;
    font-size: 15px;
    visibility: visible;
    font-size: 15px;
    line-height: 15px;
    min-height: 15px;
    font-family: monospace;
    font-size: 15px;
    margin: 0px;
    position: relative;
    padding: 0px;
}
.hoverdisplay {
    overflow:hidden;
    position:fixed;
    visibility:hidden;
}
.displayme {
    visibility:visible;
    color:RGBA(200, 150, 0, 1);
    background:#ccc;
}
#textinput #displaytext div {
    padding:0px;
    margin:0px;
    pointer-events: none;
    line-height: 15px;
    word-wrap: break-word;
    height: 15px;
    width: 100%;
    float: left;
    font-size: 15px;
    min-height: 15px;
    position: relative;
    font-family: monospace;
}
#textinput #displaytext span {
    word-wrap:break-word;
    -webkit-line-break: after-white-space;
    pointer-events: none;
    float:left;
    word-wrap: break-word;
    font-size:15px;
    line-height:15px;
    min-height:15px;
    position:relative;
    white-space: pre-wrap;
    text-align:start;
    text-indent:0px;
    overflow:hidden;
    font-family: monospace;
    z-index:1;
    font-size:15px;
    margin:0px;
    padding:0px;
}
#textinput {
    pointer-events: none;
    line-height:15px;
    word-wrap:break-word;
    min-width:1em;
    height:15px;
    width:100%;
    float:left;
    font-size:15px;
    min-height:15px;
    position:relative;
}
.mouseover {
    color:red!important;
}
textarea {
    line-height:15px;
    padding:0px;
    font-family:monospace;
    font-size:15px;
    pointer-events: all;
    word-wrap:break-word;
    position:absolute;
    top:0;
    left:0;
    background:transparent;
    width:100%;
    height:100%;
    color:RGBA(0, 0, 0, .5);
}
.unselectable {
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
*[data-tooltip]:hover {
    background:blue;
    color:
}

JavaScript

var all = [].slice.call(document.querySelectorAll('[data-tooltip]'));
var hoverdisplay = document.getElementsByClassName("hoverdisplay ")[0];
var inputbox = document.getElementsByTagName("textarea")[0];
var c = document.querySelector("#displaytext");
var space = document.createElement('span');
document.body.appendChild(space);
space.className = 'space';
space.innerHTML = '&nbsp;';
space.sizes = space.getBoundingClientRect();

var sheet = document.createElement('style');
sheet.innerHTML = ".space {width:" + space.sizes.width + "px; height:" + space.sizes.height + "px;}";
document.body.appendChild(sheet);


inputbox.addEventListener("input", function (b) {
    /////////you shouldnt' need this because you have your input setup //////////////
    var c = document.querySelector("#displaytext");
    c.innerHTML = '';
    [].slice.call(c.childNodes).forEach(function (d) {
        c.removeChild(d);
    });
    var f = document.createElement('div');
    inputbox.value.split("").forEach(function (d) {

        var F = document.createElement('span');
        F.className = 'space';


        if (/\n/gim.test(d)) {

            c.appendChild(f);
            f = document.createElement('div');
            return;
        }
        F = space.cloneNode(true);
        F.dataset['tooltip'] = d;
        F.textContent = d;
        if (d.indexOf(' ') !== -1) {
            F.innerHTML = '&nbsp;';
        }
        f.appendChild(F);



    });
    c.appendChild(f);
    ////////////////////shoudl need this stuff because of newlines and other things ///////////////
    inputbox.scrollTop = 0;
    inputbox.style.height = b.target.scrollHeight + "px";
    /*updates the height so it should match when you hit enter*/
    all = [].slice.call(document.querySelectorAll('[data-tooltip]'));
});


window.addEventListener("mousemove", (function (e) {
    var hovered;
    console.dir(e);
    var mousex = e.clientX,
        mousey = e.clientY;
    hoverdisplay.style.top = mousey + "px";
   ...