CODEWITHSUNDEEP
javascriptjquerytooltip
Josh Littlejohn
Josh Littlejohn

Reputation: 43

Tooltip triggered by text selection

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.

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.

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

Upvotes: 4

Views: 4271

Answers (2)

sje397
sje397

Reputation: 41822

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

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

Upvotes: 3

Matrym
Matrym

Reputation: 17053

I already wrote this plugin :)

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

You're welcome to adapt upon it all you like, as long as you give credit.

I've also written a somewhat slicker one, but never fully vetted it (it's kinda in alpha):

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

Upvotes: 1

Related Questions