Search code examples
javascriptjqueryhtmlcsstooltip

HTML Tooltip after selecting text in an <input> or in a <textarea>

Ok, so basically what I need is that when I select some text in an <input> or in a <textarea>, a tooltip appears with two buttons, and then get the selected text in a Javascript variable.

The image below is an example of what I need:

var selectedText = "s is an in"

I'm using Powertip for the tooltip and Rangy for manipulating selections in <input> and <textarea>, the problem is that I can't manage to popup the tooltip and get the selected text in a JS variable after I select the text with the cursor.

Any suggestions on how to achieve this?

Thanks in advance.

UPDATE:

Thanks to Todd answer, I'm sharing what I was trying to achieve: JSFiddle

Solution

  • This seems to work

    $('input, textarea').powerTip({ manual: true }); // have to prevent default plugin


$('input, textarea').on({
    'select': function() {
        var selectedText = window.getSelection().toString();
        $(this).powertip('show');
     },
     'blur': function() {
        $.powerTip.hide();
     }
});