Q:

Document selected text position giving wrong result

I am trying to show a tool tip, once the user selected some text. after client selected the text, i am placing my pop-up near to selected text, for that i use this function, it i am getting wrong x and y positions.. any help?
$(document).ready(function(){
    $('.document').click(function(e) {
        if(getSelectedText()  !="") { //checking user selected some text?
            var x = e.pageX;
            var y = e.pageY;
               $(".savetooltipAll").css("top",y); //wrong not near to text selection
               $(".savetooltipAll").css("left",x); //wong not near to text selection
               $(".savetooltipAll").show();

        } else {
            $(".savetooltipAll").hide();
        }
    })

});

A:

Quickly made a version of this.
The positioning needs to be changed/optimized to suit your HTML code and needs.
Jsfiddle: http://jsfiddle.net/j5jzaa5e/
$(document).ready(function(){
    $('body').mouseup(function(e) {
        // Get the selection range
        var range = window.getSelection().getRangeAt(0);

        // Check if text was actually selected
        if (!range.collapsed) {
            // Get bounds & set tooltip pos
            var bounds = range.getBoundingClientRect();

            var x = bounds.left + ((bounds.right - bounds.left - $(".savetooltipAll").outerWidth()) / 2);
            var y = bounds.top - $(".savetooltipAll").outerHeight() + $(window).scrollTop();
            $(".savetooltipAll").css("top", y + 'px');
            $(".savetooltipAll").css("left",x + 'px');
            $(".savetooltipAll").show();

        } else {
            $(".savetooltipAll").hide();
        }
    })
});

