// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('td.qTip').each(function()
   {
   	  $(this).qtip(
      {
		  content: {
			url: $(this).attr('title'),
			title: {
				text: $(this).attr('name'), 
				button: 'Close'
			}
		  },
		  
		  position: {
			  corner: {
				 target: 'topLeft',
				 tooltip: 'bottomLeft'
			  },
			  adjust:{
				x: 20,
				screen: true,
				scroll: true
			  }
			  
		  },
		  
		  show: { 
			effect: { 
				type: 'grow' ,
				length: 450
			} ,
			when:'click',
			solo: true // And hide all other tooltips
		  },	
		  
		  hide: {
			fixed: true,
			delay: 60000,
			when: {
				event: 'inactive' 
			},
			effect: {
				type: 'grow' ,
				length: 1000 
			}
		  },
		  
		  style: {
				//tip: 'bottomMiddle', // Dosnt work in Safari and Opera ? Apply a speech bubble tip to the tooltip at the designated tooltip corner
				border: {
				   width: 0,
				   radius: 4,
				   color: '#4F694C'
				}, 
				background: '#FFFFFF',
				color: 'black',
				name: 'light', // Use the default light style
				width: {
					min:100,
					max:400
				}, // Set the tooltip width
				title: {
					color: '#4F694C',
					'background-color': 'CEDACD'
				}
				
		  }
	   })	
   });
});