How to display tooltip next to selected text?

Question

I am trying to show a tooltip (via qTip) when a user selects a piece of text. I am trying to get the tooltip to show up right next to the selected text. Any advice on how to accomplish this? The code shown below returns the text selected in the console but does not display the tooltip.

  <div class = 'test'>Actual text will be much longer...Test Test Test Test Test Test Test Test </div>

Javascript:

                $('.test').click(function (e) {

                  // RETURN HTML OF SELECTION    
                  var html = "";
                  if (typeof window.getSelection != "undefined") {
                      var sel = window.getSelection();
                      if (sel.rangeCount) {
                          var container = document.createElement("div");
                          for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                              container.appendChild(sel.getRangeAt(i).cloneContents());
                          }
                          html = container.innerHTML;
                      }
                  } else if (typeof document.selection != "undefined") {
                      if (document.selection.type == "Text") {
                          html = document.selection.createRange().htmlText;
                      }
                  }

                  // Only do the following if some text is selected
                  if (html){
                    console.log(html);
                    $('.test').qtip({
                       content: 'This is a selected item',
                       hide: 'mouseout'
                     })
                  }

               });

Answer 1

in .qtip function you have not specified any style.

something like

   var Position = { my: 'bottom center', at: 'top center' };
    $('.test').qtip({
                   content: 'This is a selected item',
                   position: Position ,
                   hide: 'mouseout'
                 });