$(document).ready(function() 
{
   // Notice the use of the each() method to acquire access to each elements attributes
   $('.bubbles a[lessons]').each(function()
   {
      $(this).qtip({
         //content: $(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         	content: { url: $(this).attr('lessons') },
            style: { 
      			width: 300,
      			padding: 7,
      			background: '#A2D959',
      			color: 'black',
      			textAlign: 'left',
      			border: {
         			width: 7,
         			radius: 5,
         			color: '#A2D959'
      			},
      			tip: 'bottomMiddle',
      			name: 'dark' // Inherit the rest of the attributes from the preset dark style
      		},
      		show: { effect: 'fade' },
      		hide: {
            	fixed: true // Make it fixed so it can be hovered over
         	},
   			    position: {
      		   		corner: {
         				target: 'topMiddle',
         				tooltip: 'bottomMiddle'
      				},
      				adjust: { x: 0, y: -15 }
   				}
      });
   });
});

$(document).ready(function() 
{
   // Notice the use of the each() method to acquire access to each elements attributes
   $('.bubbles a[kits]').each(function()
   {
      $(this).qtip({
         //content: $(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         	content: { url: $(this).attr('kits') },
            style: { 
      			width: 500,
      			padding: 7,
      			background: '#A2D959',
      			color: 'black',
      			textAlign: 'left',
      			border: {
         			width: 7,
         			radius: 5,
         			color: '#A2D959'
      			},
      			tip: 'bottomMiddle',
      			name: 'dark' // Inherit the rest of the attributes from the preset dark style
      		},
      		show: { effect: 'fade' },
      		hide: {
            	fixed: true // Make it fixed so it can be hovered over
         	},
   			    position: {
      		   		corner: {
         				target: 'topMiddle',
         				tooltip: 'bottomMiddle'
      				},
      				adjust: { x: 0, y: 0 }
   				}
      });
   });
});

$(document).ready(function() 
{
   // Notice the use of the each() method to acquire access to each elements attributes
   $('.bubbles a[materials]').each(function()
   {
      $(this).qtip({
         //content: $(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         	content: { url: $(this).attr('materials') },
            style: { 
      			width: 650,
      			padding: 7,
      			background: '#A2D959',
      			color: 'black',
      			textAlign: 'left',
      			border: {
         			width: 7,
         			radius: 5,
         			color: '#A2D959'
      			},
      			tip: 'bottomRight',
      			name: 'dark' // Inherit the rest of the attributes from the preset dark style
      		},
      		show: { effect: 'fade' },
      		hide: {
            	fixed: true // Make it fixed so it can be hovered over
         	},
   			    position: {
      		   		corner: {
         				target: 'topLeft',
         				tooltip: 'bottomRight'
      				},
      				adjust: { x: 55, y: -15 }
   				}
      });
   });
});

$(document).ready(function() 
{
   // Notice the use of the each() method to acquire access to each elements attributes
   $('.bubbles a[materials2]').each(function()
   {
      $(this).qtip({
         //content: $(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         	content: { url: $(this).attr('materials2') },
            style: { 
      			width: 425,
      			padding: 7,
      			background: '#A2D959',
      			color: 'black',
      			textAlign: 'left',
      			border: {
         			width: 7,
         			radius: 5,
         			color: '#A2D959'
      			},
      			tip: 'bottomRight',
      			name: 'dark' // Inherit the rest of the attributes from the preset dark style
      		},
      		show: { effect: 'fade' },
      		hide: {
            	fixed: true // Make it fixed so it can be hovered over
         	},
   			    position: {
      		   		corner: {
         				target: 'topLeft',
         				tooltip: 'bottomRight'
      				},
      				adjust: { x: 55, y: -15 }
   				}
      });
   });
});

$(document).ready(function() 
{
   // Notice the use of the each() method to acquire access to each elements attributes
   $('.bubbles a[details]').each(function()
   {
      $(this).qtip({
         //content: $(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         	content: { url: $(this).attr('details') },
            style: { 
      			width: 500,
      			padding: 7,
      			background: '#A2D959',
      			color: 'black',
      			textAlign: 'left',
      			border: {
         			width: 7,
         			radius: 5,
         			color: '#A2D959'
      			},
      			tip: 'bottomMiddle',
      			name: 'dark' // Inherit the rest of the attributes from the preset dark style
      		},
      		show: { effect: 'fade' },
      		hide: {
            	fixed: true // Make it fixed so it can be hovered over
         	},
   			    position: {
      		   		corner: {
         				target: 'topMiddle',
         				tooltip: 'bottomMiddle'
      				},
      				adjust: { x: 0, y: -15 }
   				}
      });
   });
});

$(document).ready(function() 
{
   // Notice the use of the each() method to acquire access to each elements attributes
   $('.bubbles a[comments]').each(function()
   {
      $(this).qtip({
         content: { url: $(this).attr('comments') }, // Use the tooltip attribute of the element for the content
            style: { 
      			width: 300,
      			padding: 7,
      			background: '#A2D959',
      			color: 'black',
      			textAlign: 'left',
      			border: {
         			width: 7,
         			radius: 5,
         			color: '#A2D959'
      			},
      			tip: 'bottomMiddle',
      			name: 'dark' // Inherit the rest of the attributes from the preset dark style
      		},
      		show: { effect: 'fade' },
      		hide: {
            	fixed: true // Make it fixed so it can be hovered over
         	},
   			    position: {
      		   		corner: {
         				target: 'topMiddle',
         				tooltip: 'bottomMiddle'
      				},
      				adjust: { x: 0, y: -15 }
   				}
      });
   });
});