Как отобразить всплывающую подсказку рядом с выделенным текстом?

Я пытаюсь показать всплывающую подсказку (через qTip), когда пользователь выбирает фрагмент текста. Я пытаюсь заставить всплывающую подсказку отображаться рядом с выделенным текстом. Любые советы о том, как это сделать? Показанный ниже код возвращает текст, выбранный в консоли, но не отображает всплывающую подсказку.

  <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'
                     })
                  }

               });