$(document).ready(function () {

    $.fn.qtip.styles.mystyle = { // Last part is the name of the style
       background: '#efefef',
       color: 'black',
       textAlign: 'left',
       border: {
          width: 1,
          radius: 0,
          color: '#000000'
       },
       tip: { // Now an object instead of a string
         corner: 'leftMiddle', // We declare our corner within the object using the corner sub-option
         color: '#000000',
         size: {
            x: 10, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 50 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }},
       name: 'dark' // Inherit the rest of the attributes from the preset dark style
    };
    
    $('.list-item').each(function(){
        $(this).qtip({
           content: {
               text: '<img src="/tuffbuilt-sources/List/'+$(this).attr("rel")+'.jpg" alt="'+$(this).attr("title")+'" />',
               title: {
                  text: $(this).attr("title")
               }
           },
           style: 'mystyle',
		   show: { 
				solo: true, 
				when: 'mouseover'
			},
           hide: {
                 when: 'mouseout'
           },
           position: {
              corner: {
                 target: 'rightMiddle',
                 tooltip: 'leftMiddle'
              }
           }
        })
    });
	
    $.fn.qtip.styles.mystyle2 = { // Last part is the name of the style
       height: 310,
	   width: 270,
       background: '#efefef',
       color: 'black',
       textAlign: 'left',
       border: {
          width: 1,
          radius: 0,
          color: '#000000'
       },
       name: 'dark' // Inherit the rest of the attributes from the preset dark style
    };
    
    $('.pic').each(function(){
        $(this).qtip({
           content: '<img src="/tuffbuilt-sources/Applications Selection/'+$(this).attr("rel")+'.png" alt="'+$(this).attr("title")+'" />',
           style: 'mystyle2',
		   show: { 
				solo: true, 
				when: 'mouseover'
			},
           hide: {
                 when: 'mouseout', 
           },
           position: {
              corner: {
                 target: 'topLeft',
                 tooltip: 'topRight'
              }
           }
        })
    });

    $('.pic-bottom').each(function(){
        $(this).qtip({
           content: '<img src="/tuffbuilt-sources/Applications Selection/'+$(this).attr("rel")+'.png" alt="'+$(this).attr("title")+'" />',
           style: 'mystyle2',
		   show: { 
				solo: true, 
				when: 'mouseover'
			},
           hide: {
                 when: 'mouseout', 
           },
           position: {
              corner: {
                 target: 'leftBottom',
                 tooltip: 'rightBottom'
              }
           }
        })
    });
	
});