// Create the tooltips only on document load
$(document).ready(function() {
// Use the each() method to gain access to each elements attributes
    $("a[rel*='lightbox']") 
    
    //$('#content a[rel]').each(function() {
    $("a[rel*='help']").each(function() {
        $(this).click(function() { return false; });
        $(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: '<img class="throbber" src="/custom/absentfriends/Images/loadingAnimation.gif" alt="Loading..." />',
              url: $(this).attr('href'), // Use the rel attribute of each element for the url to load
              title: {
                  text: 'Help ' + $(this).text(), // Give the tooltip a title using each elements text
                  button: 'Close' // Show a close link in the title
              }
          },
          position: {
              corner: {
                  target: 'rightMiddle',
                  tooltip: 'leftMiddle'
              },
              adjust: {
                  screen: true // Keep the tooltip on-screen at all times
              }
          },
          show: {
              when: 'click',
              solo: true // Only show one tooltip at a time
          },
          hide: 'click',
          style: {
              tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
              border: {
                  width: 0,
                  radius: 4
              },
              name: 'light', // Use the default light style
              width: 400 // Set the tooltip width
          }
      })
    });
});