Tooltip help matching

I am trying to use qTip2 to display help text when a user hover's over my helpicon3 icon alongside three input text items on my web page.

Each item that I have created, I have pre-assigned the tooltip text that I want to display for that item when the user hovers over the helpicon for that input item, i.e.:

<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 based on this, when I hover over "P35_A1" helpicon, using qTip2, I would see the tooltip text "This is some help text for A1 item". The same would apply for the other two items.

The code for this, which I pulled from my view source of my page looks like this:

<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>

Now the jQuery code with qTip2 that I have and is not working is below.

Obviously, it's the context text part I am having issues with because what I am trying to do with the .each function is match the item help icon I am hovering with the itemtooltip foritem help above appear in my tooltip.

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

Again, if I hover over "P35_TEST" helpicon, using qTip2, I would see the tooltip text "This is some help text from the help section of the item."

I'm currently trying to match the label helpicon to the actual tooltip text. Further to this, is there another means that also utilises qTip2?

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.