html Selection position

by Ben Gillbanks

HTML

<div class="post">
     <h1>Select Text from the Paragraphs below</h1>

     <h2>A circle will appear in the selection position</h2>

    <p>This is some text that I want to display and wrap. This is some more text and it's showing up here. This is some text that I want to display and wrap. This is some more text and it's showing up here.</p>
    <p>This is some text that I want to display and wrap. This is some more text and it's showing up here. This is some text that I want to display and wrap. This is some more text and it's showing up here.</p>
    <p>This is some text that I want to display and wrap. This is some more text and it's showing up here. This is some text that I want to display and wrap. This is some more text and it's showing up here.</p>
    <p>This is some text that I want to display and wrap. This is some more text and it's showing up here. This is some text that I want to display and wrap. This is some more text and it's showing up here.</p>
    <p>This is some text that I want to display and wrap</p>
    <p>This is some text that I want to display and wrap</p>
    <p>This is some text that I want to display and wrap</p>
</div>

CSS

p {
    color:#666;
}
#tooltip {
    background:#ffa;
    border:2px solid #880;
    padding:5px;
    border-radius:5px;
    width:100px;
    box-sizing:border-box;
    margin-left:-50px;
    margin-top:1.4em;
}
#tooltip:before {
    content:" ";
    display:block;
    position:absolute;
    top:-12px;
    left:50%;
    margin-left:-6px;
    border:6px solid transparent;
    border-bottom-color:#880;
}

JavaScript

$(function () {
    var markerId = 'tooltip';
    
    $('.post').bind('mouseup', function (e) {
        
        var range, markerEl;
        
        if (document.selection && document.selection.createRange) {
            // Clone the TextRange and collapse
            range = document.selection.createRange().duplicate();
            range.collapse(false);

            // Create the marker element containing a single invisible character by creating literal HTML and insert it
            range.pasteHTML('<span id="' + markerId + '" />');
        } else if (window.getSelection) {
            var sel = window.getSelection();
            
            if (sel.getRangeAt) {
                range = sel.getRangeAt(0).cloneRange();
            } else {
                // Older WebKit doesn't have getRangeAt
                range.setStart(sel.anchorNode, sel.anchorOffset);
                range.setEnd(sel.focusNode, sel.focusOffset);

                // Handle the case when the selection was selected backwards (from the end to the start in the
                // document)
                if (range.collapsed !== sel.isCollapsed) {
                    range.setStart(sel.focusNode, sel.focusOffset);
                    range.setEnd(sel.anchorNode, sel.anchorOffset);
                }
            }
            
            var wordCount = (sel.toString().match(/ /g)||[]).length;
            if ( wordCount > 3 ) {
                range.collapse(false);
                
                // Create the marker element containing a single invisible character using DOM methods and insert it
                markerEl = document.createElement("span");
                markerEl.id = markerId;
                range.insertNode(markerEl);
            }
        }
        
        markerEl = $('#' + markerId);
        if ( markerEl.length == 1 ) {
            markerEl.css({
                'position':'absolute',
                'display':'none'
            }).fadeIn();
            /**
       ...