JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Select the any term</h2>
<div id="show-bubb-text">
SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT /
<hr><br>
</div>
<h2>DubleClick on any term (will be searched)</h2>
<div id="db-Click-text">
SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT /
</div>
<hr></br>
<h2>Select text to ZOOM!</h2>
<div id="zoom-text">
SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT /
</div>
<hr></br>
<div id="selection-image"></div>
CSS
#show-bubb { background:url(bubble.png) 0 0 no-repeat; width:25px; height:29px; position:absolute; top:-50px; left:-50px; }
#zoom-div { position:fixed; top:0; left:0; color:#00000; font-size:35px; background:yellow;}
h2{color:green;}
JavaScript
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;
}
$(document).ready(function() {
var url = 'http://google.com/search?q={term}', selectionImage;
$('#show-bubb-text').mouseup(function(e) {
var selection = getSelected();
if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
if(!selectionImage) {
selectionImage = $('<a>').attr({
href: url,
title: 'Click here to learn more about this term',
target: '_blank',
id: 'show-bubb'
}).html("more info").css({"color":"red","background":"yellow"}).hide();
$(document.body).append(selectionImage);
}
selectionImage.attr('href',url.replace('{term}',encodeURI(selection))).css({
top: e.pageY - 30, //offsets
left: e.pageX - 13 //offsets
}).fadeIn();
}
});
$(document.body).mousedown(function() {
if(selectionImage) { selectionImage.fadeOut(); }
});
$("#db-Click-text").dblclick(function(){
window.open("http://motyar.blogspot.com/search?q="+getSelected());
});
});
$('#zoom-text').mouseup(function(e) {
var selection = getSelected();
if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
zoomDiv = $('<div>').html(selection).attr({
id: 'zoom-div'
}).hide();
$(document.body).append(zoomDiv);
zoomDiv.fadeIn();
}
$(document).mousedown(function(){zoomDiv.fadeOut();});