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

Question

Я пытаюсь показать всплывающую подсказку (через 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' 
        }) 
        } 

       }); 

Answer 1

в .qtip функции вы не указали какой-либо стиль.

что-то вроде

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