由文本选择触发的工具提示 [英] Tooltip triggered by text selection

问题描述

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

I am looking to create a tooltip that is triggered by the selection of text (left-click dragging over text). Preferably by creating a JQuery plugin.

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

My ultimate goal is when a user selects/highlights a sentence, phrase, paragraph, it will trigger a tooltip. The tooltip will contain social sharing buttons that will allow a user to post the selection to their personal profile status.

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

So if you like a particular quote, you can select it, click share to twitter, it will call the twitter api to post the selection (if over the 140 characters it will add an ellipsis) with a shortened url back to the page of the selection.

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

Obviously this is going to take a bit of development, but as a front-end designer I just need to get the ball rolling. Thank you for any help you can provide.

我想要的功能示例类似于apture扩展功能：
http://www.apture.com/extension/

An example of the functionality I desire is similar to how the apture extension functions: http://www.apture.com/extension/

推荐答案

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

Here's a little demo: http://jsfiddle.net/sje397/fNt22/

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

It just monitors the selected text on a timer and tracks the mouse position, then creates a hovering div with a 'share' button at the mouse position whenever the selected text is not empty.

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);

这篇关于由文本选择触发的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！