How do I enable a popover after highlighting text?

Question

I am trying to understand how rap genius enable the functionality where they enable a user to highlight and then show a popover after the highlighting is finished. How would I do this using jquery?

If it helps, I'm also using twitter bootstrap for other items in my project including popovers after a user clicks on a button.

Edit: the first example works (where the user selects text within the input box), but the second (where the user selects the text in 'content') doesn't work.

    <p class = 'content'>
    Click and drag the mouse to select text in the inputs.
    </p>
    <input type="text" value="Some text" />
    <input type="text" value="to test on" />

    <div></div>


    <script>
      $(":input").select( function () {
      $("div").text("Something was selected").show().fadeOut(500);
      });

      $("content").select( function () {
      $("div").text("Something else outside of input was selected").show().fadeOut(5000);
      });
    </script>

Answer 1

Using JavaScript

document.getElementById("myDiv").onmousedown = function(){
             //Client has pressed the mouse button without releasing it...
             this.onmouseup = function(){
                    document.getElementById("myPopUp").style.display="block";
             };
};

DEMO

Using JQuery

$("#myDiv").mousedown(function(){

          $("#myDiv").mouseup(function(){

                     $("#myPopUp").show();
          });
});

DEMO

JQuery's .select()

The select event is sent to an element when the user makes a text selection inside it. This event is limited to input type="text" fields and textarea boxes.