Question

我正在尝试使用qTip2来显示帮助文本，当用户将我的helpicon3图标悬停在我的网页上的三个输入文本项目上时。

我创建的每个项目，当用户将鼠标悬停在帮助图上时，我已预先指定了要为该项目显示的工具提示文本对于该输入项目，即：

<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基于此，当我将鼠标悬停在“P35_A1”帮助图标上时，使用qTip2，我会看到工具提示文本“这是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帮助中徘徊，显示在我的工具提示中。

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

同样，如果我将鼠标悬停在“P35_TEST”帮助图标上，使用qTip2，我会看到工具提示文本“这是项目帮助部分的一些帮助文本。”

我目前正在尝试将标签帮助图标与实际的工具提示文本相匹配。除此之外，是否有另一种方法也利用qTip2？

Answer 1

需要考虑的几件事情：

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

我实际上已经汇总了一个例子，说明了如何做你前面描述的内容，并在qTip2论坛的this thread中发布了它。第二个链接显示了您要问的具体方法：

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

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

Answer 2

为什么不将您想要显示的文本显示为每个帮助图标的title属性然后执行（假设每个“helpicon”都有类helpicon）< strong>（未经测试）

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

工具提示帮助匹配

2 个答案: