Highlighted text popup widget... What to call it and where to find the Javascript?

Question

I recall seeing a web site that when you highlighted/selected text on their page, it produced a small balloon just to the upper right, which was clickable and would perform some action when clicked. I have an application where this type of interface would be appropriate for my users. But... I haven't any idea what to call this widget nor where to start from scratch.

Answer 1

I think you may be referring to a tooltip. These are easily done with javascript; here are just a couple of options:

http://www.nickstakenburg.com/projects/prototip2/ http://craigsworks.com/projects/qtip/

You would use a javascript event to trigger the popup when the user selects some text. jQuery comes with some pre-rolled event handlers that will probably accomplish what you are looking for:

http://docs.jquery.com/Events/select

Noah

Answer 2

(Quick & Dirty) - Use this as a starting point. I'm going to assume that you're using jQuery to provide a cool tooltip to the user upon text selection, instead of the alert the code does. :p

function getSelection() 
{
    if(document.selection)
    {
        return document.selection.createRange().text;
    }
    else
    {
        return window.getSelection();
    }
}

$(document).mouseup(function() { alert(getSelection()); });

This subscribes to the mouseup function and will alert whatever the user has selected, if anything. Naturally you'd have to flesh this out so that you check if the text is empty, and if not spawn a tooltip or do whatever you'd like with the text.