JS, вывод хинта над выделенным текстом

function getSelectionCoordsAndText(win) { 
    win = win || window; 
    var doc = win.document; 
    var sel = doc.selection, range, rects, rect; 
    var x = 0, y = 0, text = ''; 
    if (sel) { 
        if (sel.type != "Control") { 
            range = sel.createRange(); 
            text = range.text; 
            range.collapse(true); 
            x = range.boundingLeft; 
            y = range.boundingTop; 
        } 
    } else if (win.getSelection) { 
        sel = win.getSelection(); 
        text = sel.toString(); 
        if (sel.rangeCount) { 
            range = sel.getRangeAt(0).cloneRange(); 
            if (range.getClientRects) { 
                range.collapse(true); 
                rects = range.getClientRects(); 
                if (rects.length > 0) { 
                    rect = rects[0]; 
                    x = rect.left; 
                    y = rect.top; 
                } 
            } 
            // Fall back to inserting a temporary element 
            if (x == 0 && y == 0) { 
                var span = doc.createElement("span"); 
                if (span.getClientRects) { 
                    // Ensure span has dimensions and position by 
                    // adding a zero-width space character 
                    span.appendChild( doc.createTextNode("\u200b") ); 
                    range.insertNode(span); 
                    rect = span.getClientRects()[0]; 
                    x = rect.left; 
                    y = rect.top; 
                    var spanParent = span.parentNode; 
                    spanParent.removeChild(span); 
 
                    // Glue any broken text nodes back together 
                    spanParent.normalize(); 
                } 
            } 
        } 
    } 
    return { x: x, y: y, text: text }; 
} 
$(document).on('mouseup click', function(){ 
    var selData = getSelectionCoordsAndText(); 
    if(selData.text != ''){ 
        $('#hint').show(); 
        $('#hint').css({left: selData.x, top: selData.y-10}); 
    } else { 
        $('#hint').hide(); 
    } 
}); 
$(document).ready(function(){ 
    $('#hint').on('selectstart', false); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<p>Этот текст можно выделять. И этот текст тоже</p> 
<p>Этот текст можно выделять. И этот текст тоже</p> 
<p>Этот текст можно выделять. И этот текст тоже</p> 
<p>Этот текст можно выделять. И этот текст тоже</p> 
<div id="hint" style="position:absolute; display:none; background-color:aqua; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Hint</div>