1

当用户将鼠标悬停在我的 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 项目的一些帮助文本”。这同样适用于其他两项。

我从页面的视图源中提取的代码如下所示：

<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”帮助图标上，我会看到工具提示文本“这是来自项目帮助部分的一些帮助文本”。

我目前正在尝试将标签帮助图标与实际的工具提示文本匹配。除此之外，还有其他方法也使用 qTip2 吗？

4

2 回答 2

1

有几点需要考虑：

  • 您的 DIV 都具有相同的 ID，这是无效标记。
  • 您应该切换提示处理的顺序。换句话说，在您修复了 DIV ID 问题后，您应该针对工具条触发器而不是工具提示内容持有者进行循环。

实际上，我整理了一个示例，说明如何执行您前段时间所描述的操作，并将其发布在qTip2 论坛上的此线程中。第二个链接准确显示了如何执行您的要求：

使用页面上唯一的隐藏 DIV 元素中的提示内容，其 ID 属性基于触发器的

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

这里的关键是元素的命名。每个 ID 都有一个标准前缀“tooltip_”和“data_tooltip_”，后跟一个唯一的数字 ID。然后，在选择器中，我们专门寻找具有相关前缀的元素。

于 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 回答