javascript - 如何在所选文本旁边显示工具提示？

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