Edit in JSFiddle

var parentContainerId = "textDescription"
		
	if(!window.CurrentSelection){
		CurrentSelection = {}
	}
	
	CurrentSelection.Selector = {}
	
	//get the current selection
	CurrentSelection.Selector.getSelected = function(){
		var sel = '';
		if(window.getSelection){
			sel = window.getSelection()
		}
		else if(document.getSelection){
			sel = document.getSelection()
		}
		else if(document.selection){
			sel = document.selection.createRange()
		}
		return sel
	}
	//function to be called on mouseup
	CurrentSelection.Selector.mouseup = function(){
		
		var st = CurrentSelection.Selector.getSelected()
		if(document.selection && !window.getSelection){
			var range = st
			range.pasteHTML("<span class='selectedText'>" + range.htmlText + "</span>");			
		}
		else{
			var range = st.getRangeAt(0)    
			var newNode = document.createElement("span");
			newNode.setAttribute("class", "selectedText");
			range.surroundContents(newNode);
			//
		   var getTitle = newNode.innerHTML;
		   newNode.setAttribute("title", getTitle);

		   //
		   var popDiv = document.createElement('span');
		   popDiv.setAttribute('class', 'popDiv');
		   popDiv.innerHTML = getTitle;

		   if(newNode.innerHTML.length > 0) {
		    newNode.appendChild(popDiv);
		   }		   
		   //Remove Selection: To avoid extra text selection in IE  
		   if (window.getSelection) {
		     window.getSelection().removeAllRanges();
		   }
	       else if (document.selection){ 
	        document.selection.empty();
	       }
	       //
		}
	}
        
	$(function(){

		$("#"+parentContainerId).on('mouseup', function(){
			$('span.selectedText').contents().unwrap();
			$(this).find('span.popDiv').remove();			
		});

		$("#"+parentContainerId).bind("mouseup",CurrentSelection.Selector.mouseup);	
	})
<h1>Text selection popover</h1>	
<h2>Select some text to see the popover</h2>
<article id="textDescription">
	<p>Having been in the field, most recently in India, I have seen that access to safe water is just a few dollars away for many people. A small loan can create a pathway to a household water tap. Making access to capital ubiquitous and affordable for those living in poverty would go a long way towards eliminating water stress.</p>

	<p>Due to a combination of problems, including rapid population growth, constrained water supplies and high levels of poverty, countries such as India, Indonesia, Bangladesh and Nigeria will be hit the hardest by this trend. Resource-constrained water stress will be the norm for many countries in Asia, while finance-constrained water stress will be the norm for many countries in Africa. This is reflected in the fact that experts surveyed by the World Economic Forum expect Sub-Saharan Africa to be the most affected region, closely followed by Asia.</p>
</article>
::selection{
		background: SeaGreen;
		color: White;
	}
	::-moz-selection{
		background: SeaGreen;
		color: White;
	}
h1{ margin: 0; }
h2{ margin: 0; padding: 0; color: #666; font-size: 14px;}
#textDescription{
		line-height:1.9em; font-size:16px; margin:10px; border:1px #333 solid; padding:5px; width: 450px;
	}
	.selectedText{
		position: relative;
		background-color: SeaGreen;	color:#fff;	line-height: 1.2em;
	}	
	.popDiv{
		background: ForestGreen; color: white; padding: 6px; width: 180px; height: 80px;  
		position: absolute; top: 18px; left: 0;
		border-radius: 4px; box-shadow: 2px 3px 4px #444;

		-webkit-animation: slideIn .5s;
		animation: slideIn .5s;
	}

	@-webkit-keyframes slideIn{
		from{
			top: 8px; opacity: 0; height: 40px;
		}
		to{
			top: 18px; opacity: 1; height: 80px;
		}
	}

	@-moz-keyframes slideIn{
		from{
			top: 8px; opacity: 0; height: 40px;
		}
		to{
			top: 18px; opacity: 1; height: 80px;
		}
	}

	@keyframes slideIn{
		from{
			top: 8px; opacity: 0; height: 40px;
		}
		to{
			top: 18px; opacity: 1; height: 80px;
		}
	}