// JavaScript Document

// Create the tooltips only on document load
$(document).ready(function() 
{
   // Notice the use of the each() method to acquire access to each elements attributes
   $('span[tooltip]').each(function()
   {
      $(this).qtip({
         content: $(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         style: { 
				  width: 400,
				  padding: 20,
				  background: '#FFF',
				  'font-color': 444,
				  textAlign: 'left',
				  border: {
					 width: 7,
					 radius: 5,
					 color: '#888'
				  },
				  tip: 'bottomMiddle',
				  name: 'light' // Inherit the rest of the attributes from the preset dark style
			   },

		 show: { effect: 'fade' },
		 hide: { effect: 'slide' },
		 
		 position: {
      	 	corner: {
				 target: 'topMiddle',
				 tooltip: 'bottomMiddle'
			  }
		   }

      });
   });
});