通过文本选择触发的工具提示

Question

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

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

所以，如果你喜欢特定的报价，你可以选择它，点击分享到twitter，它会调用twitter api来发布选择（如果超过140个字符，它会添加一个省略号）并缩短url选择的页面。

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

的我渴望的功能的一个例子是类似于如何apture扩展功能： http://www.apture.com/extension/

Answer 1

这里有一个小演示：http://jsfiddle.net/sje397/fNt22/

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

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

欢迎你在它适应所有你喜欢的，只要你给信贷。

---

我也写一个有点滑头一个，但从来没有完全核实它（它还挺处于alpha）：

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