1

ユーザーが web ページの 3 つの入力テキスト項目と一緒に helpicon3 アイコンの上にカーソルを置いたときに、qTip2 を使用してヘルプ テキストを表示しようとしています。

作成した各アイテムには、ユーザーがその入力アイテムのヘルプアイコンにカーソルを合わせたときにそのアイテムに表示するツールヒント テキストを事前に割り当てています。

<span class="itemToolTip" foritem="P35_TEST">This is some help text from the help section of the item.</span>
<span class="itemToolTip" foritem="P35_A1">This is some help text for A1 item</span>
<span class="itemToolTip" foritem="P35_B1">This is some help text for B1 item</span>

o これに基づいて、qTip2 を使用して「P35_A1」ヘルプアイコンにカーソルを合わせると、「これは A1 アイテムのヘルプ テキストです」というツールチップ テキストが表示されます。同じことが他の 2 つの項目にも当てはまります。

このコードは、私のページのビュー ソースから取得したもので、次のようになります。

<label for="P35_TEST"></label>
<td  colspan="1" rowspan="1" align="left"><input type="text" name="p_t04" size="30" maxlength="2000" value="" id="P35_TEST" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td>
<label for="P35_A1"></label>
<td  colspan="1" rowspan="1" align="left"><input type="text" name="p_t05" size="30" maxlength="2000" value="" id="P35_A1" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td>
<label for="P35_B1"></label>
<td  colspan="1" rowspan="1" align="left"><input type="text" name="p_t06" size="30" maxlength="2000" value="" id="P35_B1" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td>

現在、私が持っていて機能していないqTip2を使用したjQueryコードは以下のとおりです。

.each 関数でやろうとしていることは、上記の itemtooltip foritem help でホバリングしているアイテム ヘルプ アイコンと一致するため、問題が発生しているのは明らかにコンテキスト テキスト部分です。ツールチップに表示されます。

$(document).ready(function() {
   $('span.itemToolTip').each(function(i){
     $('#helpicon').qtip({
         content: {
            text: $('label[for="' +  $(this).attr('foritem') + '"]').attr('title',$(this).html())
         },
         style: {
            classes: 'ui-tooltip-dark ui-tooltip-rounded',
            height: 5,
            width: 100
         },
         position: {
            my: 'bottom center',
            at: 'top center',
            viewport: $(window)
         }
     });
  });
});

ここでも、qTip2 を使用して "P35_TEST" ヘルプアイコンにカーソルを合わせると、ツールチップ テキスト "This is some help text from the help section of the item." が表示されます。

現在、ラベルの helpicon を実際のツールチップ テキストに一致させようとしています。これに加えて、qTip2も利用する別の手段はありますか?

4

2 に答える 2

1

A couple of things to consider:

  • Your DIVs all have the same ID, which is invalid markup.
  • You should switch around the order of tip processing. In other words, after you've fixed the DIV ID issue, you should loop against the tooltrip triggers rather than the tooltip content holders.

I actually put together an example of how to do what you're describing some time ago and posted about it in this thread on the qTip2 forums. The second link shows exactly how to do what you're asking:

Use tootip content from a unique, hidden DIV element on the page, with an ID attribute based on the trigger's

HTML:

<ul>
    <li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li>
    <li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li>
    <li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li>
</ul>

<div style="display: none;">
    <div id="data_tooltip_1">
        data_tooltip_1: You can hover over and interacte with me
    </div>
    <div id="data_tooltip_2">
        data_tooltip_2: You can hover over and interacte with me
    </div>
    <div id="data_tooltip_3">
        data_tooltip_3: You can hover over and interacte with me
    </div>
</div>

Javascript:

$(document).ready(function() {
    $('.tooltip[id^="tooltip_"]').each(function(){
        $(this).qtip({
            content: $('#data_' + $(this).attr('id')),
                show: {
            },
            hide: {
                fixed: true,
                delay: 180
            }
        });
    });
});

The key here is with the naming of your elements. Each ID has a standard prefix "tooltip_" and "data_tooltip_" followed by a unique numeric ID. Then, in the selector, we specifically look for elements that have the associated prefix.

于 2011-09-06T20:38:02.827 に答える
0

各ヘルプアイコンの属性として表示したいテキストを持っていないのはなぜですかtitle（各「ヘルプアイコン」にクラスがあると仮定してhelpicon）（テストされていません）

$(document).ready(function() {
    $('.helpicon').each(function(i){
       $(this).qtip({
           content: {
               text: $(this).attr('title')
           },
           style: {
               classes: 'ui-tooltip-dark ui-tooltip-rounded',
               height: 5,
               width: 100
           },
           position: {
               my: 'bottom center',
               at: 'top center',
               viewport: $(window)
           }
       });
   });
});
于 2011-09-05T06:28:34.600 に答える