其实这个功能十分简单，好多种实现方式，现在摘录两种实现方法：一种是使用原生js实现，一种是使用jquery实现。在实际项目中是使用kissy实现的，不过方法都差不多。本文参考了网上部分资料，如有侵权请多多原谅。
第一种使用原生js的方式：思路大体是首先将一个图片元素进行隐藏，然后获得选中文字事件，最后当鼠标位于选中文字上方时显示图片或者特定文字提示，点击提示就触发事件。
var hideImage = document.getElementById("hideImage");var $selectFx = function(hideImage, eleContainer) {eleContainer = eleContainer || document;var getSelectTxt = function() {var txt = "";if(document.selection) {txt = document.selection.createRange().text; // IE} else {txt = document.getSelection();}return txt.toString();};eleContainer.onmouseup = function(e) {e = e || window.event;var txt = getSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;if (txt) {hideImage.style.display = "inline";hideImage.style.left = left + "px";hideImage.style.top = top + "px";} else {hideImage.style.display = "none";}};hideImage.onclick = function() {var txt = getSelectTxt();alert(txt);//此处你可以添加你想要的实现};
}(hideImage);$(function () {$("#content").mouseup(function (e) {var x = 10;var y = 10;var text = "";if (document.selection) {text = document.selection.createRange().text;}else if (window.getSelection()) {text = window.getSelection();}if (text!= "") {var tip = "有能耐你点我一下啊";var tooltip = "<div id='tooltip' class='tooltip'><a οnclick=doit('"+r+"')>" + tip + "</a></div>";$("body").append(tooltip);$("#tooltip").css({"top": (e.pageY + y) + "px","left": (e.pageX + x) + "px","position": "absolute"}).show("fast");}}).mousedown(function () {$("#tooltip").remove();});
})function doit(text) {if (text != "") {alert(text);//此处你可以添加你想要的实现}
}