$(document).ready(function() {
   // Make sure to only match links to wikipedia with a rel tag
   $('.guidelineajax').each(function()
   {
      // We make use of the .each() loop to gain access to each element via the "this" keyword...
      $(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="/css/images/loading.gif" alt="Loading..." />',
            ajax: {
               url: $(this).attr('rel') // Use the rel attribute of each element for the url to load
            },
            title: {
               text: 'Guideline', // Give the tooltip a title using each elements text
               button:false
            }
         },
         position: {
            at: 'bottom center', // Position the tooltip above the link
            my: 'top center',
            viewport: $(window), // Keep the tooltip on-screen at all times
            effect: false // Disable positioning animation
         },
         show: {
            event: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: 'mouseout',
         style: {
            classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
         }
      })
   })
 
   $('.guidelineinline').each(function()
   {
      // We make use of the .each() loop to gain access to each element via the "this" keyword...
      $(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('alt'),
            title: {
               text: 'Guideline', // Give the tooltip a title using each elements text
               button:false
            }
         },
         position: {
            at: 'bottom center', // Position the tooltip above the link
            my: 'top center',
            viewport: $(window), // Keep the tooltip on-screen at all times
            effect: false // Disable positioning animation
         },
         show: {
            event: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: 'mouseout',
         style: {
            classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
         }
      })
   })
   
   $('.guidelineinline_mail').each(function()
   {
      // We make use of the .each() loop to gain access to each element via the "this" keyword...
      $(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('alt'),
            title: {
               text: 'Message content', // Give the tooltip a title using each elements text
               button:false
            }
         },
         position: {
            at: 'bottom center', // Position the tooltip above the link
            my: 'top center',
            viewport: $(window), // Keep the tooltip on-screen at all times
            effect: false // Disable positioning animation
         },
         show: {
            event: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: 'mouseout',
         style: {
            classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
         }
      })
   })
 
});