// 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: 'show',
				  delay: 0
				},
		 
		 hide: { 
		 		  effect: 'fade'
				},
		 
		 show: { 
		 		  solo:true 
				},

		 
		 hide : {
         fixed : false,
         when : {
            event : 'unfocus'
         }
      },
      api: {
         onRender : function (){ 
            this.elements.content.find('img.close').click(this.hide);
         }
      },

		 
		 position: {
      	 	corner: {
				 target: 'topMiddle',
				 tooltip: 'bottomMiddle'
			  }
		   }

      });
   });
});