// Create the tooltips only on document load
$.fn.qtip.styles.general = { // Last part is the name of the style
	//width: 200,
	background: '#f5d38b',
	color: 'black',
	textAlign: 'center',
	border: {
		width: 1,
		radius: 2,
		color: '#aa9081'
	},
	tip: { // Now an object instead of a string
		corner: 'bottomLeft',// We declare our corner within the object using the corner sub-option
		color: '#b08f56',
		size: {
			x: 5, // Be careful that the x and y values refer to coordinates on screen, not height or width.
			y: 5 // Depending on which corner your tooltip is at, x and y could mean either height or width!
		}
	},
	//tip: 'bottomLeft',
	name: 'dark' // Inherit the rest of the attributes from the preset dark style
}

$.fn.qtip.styles.menu = { // Last part is the name of the style
	//width: 200,
	background: '#caeaa2',
	color: 'black',
	textAlign: 'center',
	border: {
		width: 1,
		radius: 2,
		color: '#000000'
	},
	tip: { // Now an object instead of a string
		corner: 'bottomLeft',// We declare our corner within the object using the corner sub-option
		color: '#000000',
		size: {
			x: 5, // Be careful that the x and y values refer to coordinates on screen, not height or width.
			y: 5 // Depending on which corner your tooltip is at, x and y could mean either height or width!
		}
	},
	//tip: 'bottomLeft',
	name: 'dark' // Inherit the rest of the attributes from the preset dark style
}

$(document).ready(function(){
	// By suppling no content attribute, the library uses each elements title attribute by default
	$('#contenu_droite a[href][title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 1,
				y: -1
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'menu'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#contenu_droite img[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'menu'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#contenu_droite label[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'menu'
	});
		
	// By suppling no content attribute, the library uses each elements title attribute by default
	$('#contenu_gauche a[href][title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 1,
				y: -1
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'menu'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#contenu_gauche img[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'menu'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#contenu_gauche label[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'menu'
	});
		
	// By suppling no content attribute, the library uses each elements title attribute by default
	$('#haut_fond a[href][title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 1,
				y: -1
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'general'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#haut_fond img[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'general'
	});
	
	// By suppling no content attribute, the library uses each elements title attribute by default
	$('#menu_haut a[href][title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 1,
				y: -1
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'general'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#menu_haut img[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'general'
	});
	
	// By suppling no content attribute, the library uses each elements title attribute by default
	$('#contenu_milieu a[href][title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 1,
				y: -1
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'general'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#contenu_milieu img[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'general'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#contenu_milieu label[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'menu'
	});
	
	// By suppling no content attribute, the library uses each elements title attribute by default
	$('#pied a[href][title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 1,
				y: -1
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'general'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#pied img[title]').qtip({
		content: {
			text: false // Use each elements title attribute
		},
		position: {
			target: 'mouse',
			adjust: {
				mouse: true,
				x: 10,
				y: 10
			},
			corner: {
				target: 'bottomLeft',
				tooltip: 'bottomLeft'
			}
		},
		style: 'general'
	});
});