// Create the tooltips only on document load
$.fn.qtip.styles.general = {
	// Last part is the name of the style
	//width: 200,
	background: '#ffffff',
	color: 'black',
	textAlign: 'center',
	border: {
		width: 1,
		radius: 2,
		color: '#718E94'
	},
	tip: { // Now an object instead of a string
		corner: 'bottomLeft',// We declare our corner within the object using the corner sub-option
		color: '#718E94',
		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
	$('#page 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:
	$('#page 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:
	$('#page 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: 'general'
	});
	// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
	$('#page input[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
	$('#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'
	});
});