1

やあ、

私は自分のサイトでqTipを使用していますが、これはドキュメント準備機能がどのように見えるかです：

    $.fn.qtip.styles.mystyle = { // Last part is the name of the style
       width: 200,
       background: '#ebf1ff',
       color: 'black',
       textAlign: 'center',
       border: {
          width: 1,
          radius: 4,
          color: '#AACCEE'
       },
       tip: 'bottomLeft',
       name: 'dark'
    }



   $('.controlTitleContainer .icon').qtip({
       content: $(this).find('.tooltip').html(),
        position: {
              corner: {
                 target: 'topRight',
                 tooltip: 'bottomLeft'
              }
           },
       style: 'mystyle'
    });

最初の部分はスタイリング専用ですが、2番目の部分はqtipに入力する部分です。

私のHTMLは次のようになります：

 <div class="controlTitleContainer">
      <div class="text">
           <label for="ModelViewAd_Title">Titel</label>
      </div>
      <div class="icon">
           &nbsp;<div class="toolTip">MyToolTipTest</div>
      </div>
  </div>

注：クラスtoolTipはDisplay：noneに設定されており、class = "icon"divvillがツールチップを表示します。

ページにこのようなhtmlスニペットがたくさんありますが、異なるデータが含まれています。必要なのは、の現在の内部htmlを表示するためのツールチップです。これは可能ですか、それともこのようなすべてのHTMLスニペットに対してqtipの宣言を生成する必要がありますか？

罪状認否のアドバイス

よろしくお願いします

4

1 に答える 1

3

こんな感じでいかがですか？

$(document).ready(function(){
    $.each($(".tooltip"), function(i,val){
        $.fn.qtip.styles.mystyle = { 
           width: 50,
           background: '#ebf1ff',
           color: 'black',
           textAlign: 'center',
           border: {
              width: 1,
              radius: 4,
              color: '#AACCEE'
           },
           tip: 'bottomLeft',
           name: 'dark'
        }

        var theContent = $(val).html();
        $(val).qtip({
            content: theContent,
             position: {
                      corner: {
                         target: 'topRight',
                         tooltip: 'bottomLeft'
                      }
                   },
               style: 'mystyle'
        });
    });
});

このように、divwithclass="tooltip"は自動的にqTipを有効にします。それは実際に私が私のプロジェクトでしたことです。

これが私のテストHTMLです：-

 <div class="controlTitleContainer">
      <div class="text">
           <label for="ModelViewAd_Title">Titel</label>
      </div>
      <div class="icon">
           &nbsp;<span class="tooltip">MyToolTipTest</span>
           &nbsp;<span class="tooltip">MyToolTipTest2</span>
           &nbsp;<span class="tooltip">MyToolTipTest3</span>
      </div>
  </div>
于 2011-02-10T19:23:37.567 に答える