// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('img.o2plus').each(function()
   {
   	  $(this).qtip(
      {
		  content: {
			url: '/includes/templates/i-contacts/qTips/o2plus_help.html',
			title: {
				text: 'What is o2 plus?', 
				button: 'Close'
			}
		  },
		  
		  position: {
			  corner: {
				 target: 'topLeft',
				 tooltip: 'bottomLeft'
			  },
			  adjust:{
				screen: true,
				scroll: false
			  }
			  
		  },
		  
		  show: { 
			effect: { 
				type: 'grow' ,
				length: 450
			} ,
			when:'mouseover',
			solo: true // And hide all other tooltips
		  },	
		  
		  hide: {
			fixed: false,
			when: {
				event: 'unfocus' 
			},
			effect: {
				type: 'grow' ,
				length: 1000 
			}
		  },
		  
		  style: {
				tip: true, // Dosnt work in Safari and Opera ? Apply a speech bubble tip to the tooltip at the designated tooltip corner
				border: {
				   width: 1,
				   radius: 3,
				   color: '#EE7D15'
				}, 
				background: '#FFFFFF',
				color: 'black',
				name: 'light', // Use the default light style
				width: {
					min:350,
					max:400
				}, // Set the tooltip width
				title: {
					color: '#EE7D15',
					'background-color': '#E7DFCE'
				}
				
		  }
	   })	
   });
});