4

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/

Josh Littlejohn
  • 43
  • 1
  • 4

2 Answers2

3

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);
sje397
  • 41,293
  • 8
  • 87
  • 103
  • @Matrym: what browser doesn't this work in? The only tricky part is 'getSelectedText' and I think that is portable. – sje397 Dec 07 '10 at 21:00
  • @sj397 I've retracted my comment, and please accept my sincerest apologies. Your solution is unbelievably elegant! :) - Unrelated to the selection, have you considered using mouseup to check for a modified text selection rather than setInterval? – Matrym Dec 09 '10 at 04:08
  • @Martym: cheers. Using `mouseup` would be a lot more efficient, but might not handle keyboard selection very well. – sje397 Dec 09 '10 at 05:09
  • @sje397 - The jsfiddle link throws a 404. I know the answer is 6+ years old, but if possible, could you please update the answer with the correct URL? – JRodDynamite May 31 '17 at 08:46
1

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

Matrym
  • 16,643
  • 33
  • 95
  • 140