1

検索結果のリストがあり、それぞれについて、問題の結果に関する詳細情報をツールチップに表示できるようにしたいと考えています。

各要素をロールオーバーしたときにqTipツールチップが表示されるようになりましたが、各結果のツールチップにカスタムコンテンツを取り込む方法がわかりません。

これは主に、jQueryに関する知識が非常に限られているためだと思います。

<a>古いスタイルのJavaScriptでは、タグに付加された関数呼び出しからのツールチップコンテンツである変数を渡します。jQueryツールチップのタグに関数呼び出しが記述されて<a>いないため、これは現在の方法ではないようです。

現在、私はこれを頭の中に持っています：

<script type="text/javascript" 
       src="/assets/templates/unaexchange/js/jquery.qtip-1.0.0.min.js"></script>

<script>
$(document).ready(function() {
$(".tooltip").qtip({
   content: 'this is the content',
   position: {
      corner: {
         target: 'topRight',
         tooltip: 'bottomLeft'
      }
   }
});
});

そして、体は持っていて<a class="tooltip">Link</a>、それから私は標準を持っています：

<div class="qtip qtip-stylename">
  <div class="qtip-tip" rel="cornerValue"></div>
  <div class="qtip-wrapper">
    <div class="qtip-borderTop"></div> 
             <!-- Only present when using rounded corners-->
    <div class="qtip-contentWrapper">
        <div class="qtip-title"> 
             <!-- All CSS styles...-->
        <div class="qtip-button"></div> 
             <!-- ...are usually applied...-->
    </div>
    <div class="qtip-content">an attempt at standard content ?></div> 
             <!-- ...to these three elements!-->
  </div>
  <div class="qtip-borderBottom"></div> 
             <!-- Only present when using rounded corners-->
  </div>
</div>

しかし、これは表示されておらず、ツールチップごとにHTMLの特定のチャンクを作成する方法がわかりません。

私のアプローチは間違っていますか？

カスタムコンテンツを含むすべての個別のツールチップを個別のIDで作成してから、これらのIDを取得して表示する必要がありますか？

4

2 に答える 2

7

<a>タグのタイトルを使用するには、contentプロパティを省略できます。

// use title attribute
$(".tooltip").qtip({
    position: {
        corner: {
            target: 'topRight',
            tooltip: 'bottomLeft'
        }
    }
});

または、jqueryセレクターを使用できます。例えば：

// use jquery selector
$(".tooltip2").each(function() {

    var content = $($(this).attr("href")).html();

    $(this).qtip({
        content: content,
        position: {
            corner: {
                target: 'topRight',
                tooltip: 'bottomLeft'
            }
        }
    });
});

ここでの例：jsFiddle

于 2011-03-24T13:23:28.893 に答える
0

必要なツールチップコンテンツを使用して、各DOM要素に属性を追加しtitleます。例えば、

<span class='tooltip' title='This will show up as a tooltip'>Whatever your markup happens to be</span>

また

<a class='tooltip' href='#' title='Another tooltip'>Some link</a>

このtitle属性は、すべてのDOM要素のHTML5で標準です。

于 2011-03-25T05:26:08.837 に答える