由文本选择触发的工具提示

我希望创建一个由文本选择触发的工具提示（左键单击拖动文本）。 最好是通过创建一个JQuery插件。

我的最终目标是当用户选择/突出显示句子，短语，段落时，它将触发工具提示。 工具提示将包含社交分享按钮，允许用户将选择发布到其个人资料状态。

因此，如果您喜欢特定的报价，您可以选择它，点击分享到Twitter，它会调用twitter api发布选择（如果超过140个字符，它将添加省略号），并将缩短的URL返回到页面选择。

显然这需要一些开发，但作为一名前端设计师，我只需要让球滚动。 感谢您提供任何帮助。

我想要的function的一个例子类似于apture扩展function： http ： //www.apture.com/extension/

Answer 1

这是一个小小的演示： http ： //jsfiddle.net/sje397/fNt22/

它只监视计时器上的选定文本并跟踪鼠标位置，然后在所选文本不为空时创建一个在鼠标位置带有“共享”按钮的hoverdiv。

var mousePos; $(document).mousemove(function (e) { mousePos = {left: e.pageX + 20, top: e.pageY + 20}; }); var selectedText = ''; function getSelectedText(){ if(window.getSelection){ return window.getSelection().toString(); } else if(document.getSelection){ return document.getSelection(); } else if(document.selection){ return document.selection.createRange().text; } } function checkSelectionChanged() { var current = getSelectedText(); if(current != selectedText) { selectedText = current; if(selectedText != '') { $('#quote #text').text(selectedText); $('#quote').offset(mousePos); $('#quote').show(); } else { $('#quote').hide(); } } } setInterval(checkSelectionChanged, 1000); 

Answer 2

我已经写了这个插件:)

http://www.latentmotion.com/search-and-share

只要你给予信任，欢迎你随心所欲地适应它。

---

我也写了一个有点光滑的，但从未完全审查它（它有点阿尔法）：

http://seox.org/pro-beta.html