darren-dev/jsbin.porib.css

## jsbin.porib.css
.colorPick{
      width: 10px;
      height: 10px;
      border-radius: 5px 5px;
      border: 1px solid black;
      position: block;
}

.colorPick.red{
  background: red;
}

.colorPick.blue{
  background: blue;
}


## jsbin.porib.html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link href="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="qtipContent" style="display: none">
    <span id=""></span>
    <span id=""></span>
    <div style="clear: both">
      <div style="float:left">
        <button>Add note</button>
      </div>
      <div id="colorHolders" style="float:right">
        <div class="colorPick red">
        </div>
        <div class="colorPick blue">
        </div>
      </div>
    </div>
  </div>
  <div id="qtipHolder" style="position: absolute; top:0; left:0;"></div>
  <hr />
  <div id="content">
    <p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam eros non odio fringilla, placerat feugiat turpis gravida. Vivamus ac porttitor metus. Aliquam a facilisis erat. Morbi a nisi nibh. Vestibulum volutpat gravida eros. Ut in tortor at magna gravida consectetur eget at dui. Vivamus eget justo eu libero mattis interdum. Morbi iaculis lorem ut felis commodo accumsan. Phasellus a tristique tellus, at lobortis neque. Proin quis tempus est. Morbi dignissim tempor justo at fringilla. Proin sit amet tortor mattis, euismod est eu, volutpat mauris.</p>
</div>
</body>
</html>

## jsbin.porib.js
function getSelected() {
    var txt = '';
    if (window.getSelection) {
        txt = window.getSelection();
    } else if (document.getSelection) {
        txt = document.getSelection();
    } else if (document.selection) {
        txt = document.selection.createRange().text;
    }
    return txt;
}

$(document).ready(function () {
  $('#content').qtip({
            content: $("#qtipContent"),
            position: {
                target: $("#qtipHolder")
                //adjust: {x: evt.clientX, y: evt.clientY }
            },
            show:{
                event: "none"
            },
            hide:{
                event: "unfocus"
            }
        });

    $('#content').mouseup(function (evt) {
        var selectedT = getSelected();
        var selectionObject = $.extend(true, {}, window.getSelection());
        var selectionRange = window.getSelection().getRangeAt(0);
        var element = document.getElementById('text');

        var range = selectionRange.endOffset - selectionRange.startOffset;
        window.console.log(range);

        if(range > 4){
          var api = $('#content').qtip('api');

          api.set({
            "position.adjust.x" : evt.clientX,
            "position.adjust.y" : evt.clientY
          });

          $('#content').qtip('show');
        }
        else{
            $('#content').qtip('hide');
        }
    });
});
	.colorPick{
	width: 10px;
	height: 10px;
	border-radius: 5px 5px;
	border: 1px solid black;
	position: block;
	}

	.colorPick.red{
	background: red;
	}

	.colorPick.blue{
	background: blue;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	<link href="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="qtipContent" style="display: none">
	<span id=""></span>
	<span id=""></span>
	<div style="clear: both">
	<div style="float:left">
	<button>Add note</button>
	</div>
	<div id="colorHolders" style="float:right">
	<div class="colorPick red">
	</div>
	<div class="colorPick blue">
	</div>
	</div>
	</div>
	</div>
	<div id="qtipHolder" style="position: absolute; top:0; left:0;"></div>
	<hr />
	<div id="content">
	<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam eros non odio fringilla, placerat feugiat turpis gravida. Vivamus ac porttitor metus. Aliquam a facilisis erat. Morbi a nisi nibh. Vestibulum volutpat gravida eros. Ut in tortor at magna gravida consectetur eget at dui. Vivamus eget justo eu libero mattis interdum. Morbi iaculis lorem ut felis commodo accumsan. Phasellus a tristique tellus, at lobortis neque. Proin quis tempus est. Morbi dignissim tempor justo at fringilla. Proin sit amet tortor mattis, euismod est eu, volutpat mauris.</p>
	</div>
	</body>
	</html>
	function getSelected() {
	var txt = '';
	if (window.getSelection) {
	txt = window.getSelection();
	} else if (document.getSelection) {
	txt = document.getSelection();
	} else if (document.selection) {
	txt = document.selection.createRange().text;
	}
	return txt;
	}

	$(document).ready(function () {
	$('#content').qtip({
	content: $("#qtipContent"),
	position: {
	target: $("#qtipHolder")
	//adjust: {x: evt.clientX, y: evt.clientY }
	},
	show:{
	event: "none"
	},
	hide:{
	event: "unfocus"
	}
	});

	$('#content').mouseup(function (evt) {
	var selectedT = getSelected();
	var selectionObject = $.extend(true, {}, window.getSelection());
	var selectionRange = window.getSelection().getRangeAt(0);
	var element = document.getElementById('text');

	var range = selectionRange.endOffset - selectionRange.startOffset;
	window.console.log(range);

	if(range > 4){
	var api = $('#content').qtip('api');

	api.set({
	"position.adjust.x" : evt.clientX,
	"position.adjust.y" : evt.clientY
	});

	$('#content').qtip('show');
	}
	else{
	$('#content').qtip('hide');
	}
	});
	});