Text Picker Tooltip

Question

I am looking to create a tooltip triggered by a selection of text (drag and drop on the text with the left mouse button). Preferably by creating a jQuery plugin.

My ultimate goal is when the user selects / selects a sentence, phrase, paragraph, he brings up a hint. The tooltip will contain social sharing buttons that will allow the user to post the highlight to their personal profile.

So, if you like a specific quote, you can select it, click share to twitter, it will select twitter api to publish the selection (if an ellipsis is added over 140 characters) with a shortened URL back to the selection page.

Obviously, this will take a little time, but as a front-end designer, I just need to get the ball. Thank you for any help you can provide.

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

Answer 1

Here is a small demo: http://jsfiddle.net/sje397/fNt22/

It simply controls the selected text by timer and tracks the position of the mouse, and then creates a hovering div with a share button in 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); 

Answer 2

I already wrote this plugin :)

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

You can adapt to it all that you like, as long as you pay tribute.

---

I also wrote some slicker, but never fully tested it (this is similar to alpha):

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