How to have a popup after selecting text?

Question

I can't seem to figure this out. I have a div with some text in it. When the user selects pieces of it (totally at random, whatever they want), I want a small popup to occur with the text inside of it.

To initiative the popup, can I just do this? ...

$('#textdiv').click(function() {  

But then how do I get only the selected/highlighted text?

Answer 1

Just updated first answer. Try this

function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	$('#my-textarea').mouseup(function(event) {
		var selection = getSelected();
        selection = $.trim(selection);
        if(selection != ''){
        $("span.popup-tag").css("display","block");
        $("span.popup-tag").css("top",event.clientY);
        $("span.popup-tag").css("left",event.clientX);
        $("span.popup-tag").text(selection);
        }else{
        $("span.popup-tag").css("display","none");
        }
	});
});

.popup-tag{
position:absolute;
display:none;
background-color:#785448d4;
color:white;
padding:10px;
font-size:20px;
font-weight:bold;
text-decoration:underline;
cursor:pointer;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select any text :<br>
<textarea type="text" id="my-textarea" style="width:100%; height:200px;" >
While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in his hometown of Rameshwaram, where he was buried with full state honours.
</textarea>

<span class="popup-tag"></span>

see: https://jsfiddle.net/arunmaharana123/kxj9pm40/

Answer 2

jQuery isn't going to be of much use here, so you'll need pure JS to do the selection grabbing part (credit goes to this page):

function getSelected() {
  if(window.getSelection) { return window.getSelection(); }
  else if(document.getSelection) { return document.getSelection(); }
  else {
    var selection = document.selection && document.selection.createRange();
    if(selection.text) { return selection.text; }
    return false;
  }
  return false;
}

You were on the right track with the mouseup handler, so here's what I got working:

$('#test').mouseup(function() {
    var selection = getSelected();

    if (selection) {
        alert(selection);
    }
});

And a live demo: http://jsfiddle.net/PQbb7/7/.