Problem loading html content from hidden div

[SpinDrift]

First off, I know this is probably a simple one and there are similar threads for which I apologise, but I have tried several options with no success.

I am trying to load my qTip content from a div which contains a call to some server side code (classic ASP). This code goes and gets the file type and file size of a give file name. This works ok, but my qTip only looks at the first div with the given class name on the page.

JS Code

$('a.<%= strHandler %>').each(function() {
   		$(this).qtip({
      		content: {
				text: $(this).attr('title') + $(this).next('.moreInfo').html()
			},
	  		show: { 
				solo: true
			},
			position: {
      			corner: {
					target: 'rightMiddle',
					tooltip: 'leftMiddle'
      			}
	  		},
			style: { 
				maxwidth: 300,
				padding: 5,
				background: '#A2D959',
				color: 'black',
				//textAlign: 'justify',
 
				border: {
					width: 7,
					radius: 5,
					color: '#A2D959'
				},
			  tip: 'leftMiddle',
			  name: 'dark' // Inherit the rest of the attributes from the preset dark style
			},
			// Remove default browser tooltip
			api: {
				onRender: function(){ 
					this.elements.target.removeAttr('title')
				}
			}
	   });
	});

Here is my HTML

JS Code

<p><a class="<%= strHandler %>" title="Some Title Text" href="/folder/subfolder/filename<%= strSampleFileType %>">Sample</a></p>
    	<div class="moreInfo"><%getFileSize("/folder/subfolder/filename"&strSampleFileType)%></div>    
 
<p><a class="<%= strHandler %>" title="Another Title Text" href="/folder/subfolder/filename2<%= strSampleFileType %>">Sample</a></p>
        <div class="moreInfo"><%getFileSize("/folder/subfolder/filename2"&strSampleFileType)%></div>
 
<p><a class="<%= strHandler %>" title="Yet Another Title Text" href="/folder/subfolder/filename3<%= strSampleFileType %>">Sample</a></p>
        <div class="moreInfo"><%getFileSize("/folder/subfolder/filename3"&strSampleFileType)%></div>

Could anyone kindly offer some help? As I say, it's probably a simple fix, but my head is a bit frazzled and I'm struggling to find an appropriate solution.

[Craig]

Your moreInfo div is next to your parent p element, not your a element Try this out instead:

JS Code

$('a.<%= strHandler %>').each(function() {
         $(this).qtip({
            content: {
               text: $(this).attr('title') + $(this).parent().next('.moreInfo').html()
           },
           show: { 
            solo: true
         },
         position: {
               corner: {
               target: 'rightMiddle',
               tooltip: 'leftMiddle'
               }
           },
         style: { 
            maxwidth: 300,
            padding: 5,
            background: '#A2D959',
            color: 'black',
            //textAlign: 'justify',
 
            border: {
               width: 7,
               radius: 5,
               color: '#A2D959'
            },
           tip: 'leftMiddle',
           name: 'dark' // Inherit the rest of the attributes from the preset dark style
         },
         // Remove default browser tooltip
         api: {
            onRender: function(){ 
               this.elements.target.removeAttr('title')
            }
         }
      });
   });

[SpinDrift]

(26th August 13:39)Craig Wrote:  Your moreInfo div is next to your parent p element, not your a element Try this out instead:

JS Code

$('a.<%= strHandler %>').each(function() {
         $(this).qtip({
            content: {
               text: $(this).attr('title') + $(this).parent().next('.moreInfo').html()
           },
           show: { 
            solo: true
         },
         position: {
               corner: {
               target: 'rightMiddle',
               tooltip: 'leftMiddle'
               }
           },
         style: { 
            maxwidth: 300,
            padding: 5,
            background: '#A2D959',
            color: 'black',
            //textAlign: 'justify',
 
            border: {
               width: 7,
               radius: 5,
               color: '#A2D959'
            },
           tip: 'leftMiddle',
           name: 'dark' // Inherit the rest of the attributes from the preset dark style
         },
         // Remove default browser tooltip
         api: {
            onRender: function(){ 
               this.elements.target.removeAttr('title')
            }
         }
      });
   });

Craig, you're an absolute gent! Thank you.