// Create the tooltips only on document load
$(document).ready(function()
{
    // Use the each() method to gain access to each elements attributes
    $('#application 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: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
                url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
                title: false/*{
                 text: $(this).attr('name'), // Give the tooltip a title using each elements text
                 button: '' // Show a close link in the title
                 }        */
            },
            position: {
                corner: {
                    target: 'bottomMiddle', // Position the tooltip above the link
                    tooltip: 'topMiddle'
                },
                adjust: {
                    screen: false // Keep the tooltip on-screen at all times
                }
            },
            show: {
                when: 'click',
                solo: true // Only show one tooltip at a time
            },
            hide:  'unfocus',
            /*hide: {
             fixed: true, // Make it fixed so it can be hovered over
             solo: true // Only show one tooltip at a time
             },*/
            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: 350 // Set the tooltip width
            }
        })
    });
});