2011-02-10 4 views
1

こんにちは、複数の場所に1つのqtipを使用しますが、内容は異なりますか?

私は自分のサイト上で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' 
    }); 

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> 

ノート:クラスのツールチップを表示するように設定されて:なし、およびクラス=「アイコン」のdiv VILLツールチップ

を示している一つであります

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

嘆願アドバイス

BestRegards

答えて

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

この方法で、class="tooltip"を持つ任意のdivは自動的にQティップが有効になっています。それは実際に自分のプロジェクトでやったことです。

は、ここに私のテスト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> 
+0

ありがとう!しかし、私はそれを試して、私はB.contentがnullになるのですか? "$(this).html()"を 'test'に置き換えると、ツールチップが動作していることがわかります。私のHTMLに何か問題がありますか? – Banshee

+0

ところで、「ツールチップ」という言葉は大文字と小文字を区別します。 divに 'toolTip'ではなく' tooltip'があることを確認してください。 – limc

+0

ありがとう、私もそれを試みましたが、私はまだB.contentがnullになるのですか?また、.tooltip div要素のテキストを隠すが、質問アイコンを表示する方法は? – Banshee

関連する問題