2

ユーザーがテキストを選択したときに (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'
                     })
                  }

               });
4

1 に答える 1

1

.qtip 関数では、スタイルを指定していません。

何かのようなもの

   var Position = { my: 'bottom center', at: 'top center' };
    $('.test').qtip({
                   content: 'This is a selected item',
                   position: Position ,
                   hide: 'mouseout'
                 });
于 2013-11-08T08:48:56.807 に答える