// Create the tooltips only on document load
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $('#content a[rel]').each(function()
   {
      $(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: $(this).attr('rel')+".....<a href=detail.asp?"+$(this).attr('id')+" target='_blank'>View Full Description</a>",
           // url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
            title: {
               text: $(this).attr("name"), // Give the tooltip a title using each elements text
               button: '<div id="foo"></div>' // Show a close link in the title
            }
         },
         position: {
            corner: {
               target: 'leftMiddle', // Position the tooltip above the link
               tooltip: 'rightMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
         },
         show: { 
            when: 'mouseenter', 
         		effect: {type: 'fade', length: 300},
            solo: true // Only show one tooltip at a time
         },
         hide: {
         	effect: {type: 'fade', length: 300},
         	when: {event: 'unfocus', event: 'mouseout'},
         	delay: 500000000,
         	fixed: true
         },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
           
            border: {
               width: 0,
               radius: 3
            },
            name: 'sg', // Use the default light style
            width: 360 // Set the tooltip width
         }
      })
   });
});