a/20570055/1636522

HTML

<p><i>Click a word.</i></p>
<input />

CSS

body, textarea {
    font: normal 16px Arial;
}
i {
    color: gray;
}
textarea {
    display: block;
    width: 100%;
    border: none;
    resize: none;
    outline: none;
    margin: .5em 0;
}

JavaScript

var el = $('input'),
    text = el.text();
el.hover(function () {
    var i = getCaret(this),
        w = getWord(text, i);
    $('p').text('"' + w + '" (index : ' + i + ')');
});

// http://stackoverflow.com/a/995374/1636522

el[0].style.height = '1px';
el[0].style.height = 25 + el[0].scrollHeight + 'px';

function getWord(s, i) {
    var r = /\s/g;
    while (i && !r.test(s[--i])) {}
    r.lastIndex = i && ++i;
    return s.slice(i, (
        r.exec(s) || { index: s.length }
    ).index);
}

// http://stackoverflow.com/a/263796/1636522

function getCaret(el) {
    if (el.selectionStart) {
        return el.selectionStart;
    } else if (document.selection) {
        el.focus();
        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }
        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }
    return 0;
}