How to dynamically destroy tooltips?

[fchristant]

hi,

I have a page with a lot of thumbnails. Upon hovering a thumbnail, it shows a tooltip, with HTML details. This works fine.

However, I do not want to run an "each" loop to create these tooltips upon document load, as that is memory intensive. Instead, I want the following behavior:

- Hoverin: dynamically create the tooltip
- Hoverout: dynamically destory the previously created tooltip

I currently have the following code:

JS Code

$(document).ready(function() {
 
	$(".imagelist li a").hover(
	function () {
		$(this).qtip({
			content: $(".imagedetails",this).html().length == 0 ? "-" : $(".imagedetails",this).html(),
			style: {
				background:'#f7f7f7',
				border: {
					width: 1,
					radius: 0,
					color:'#333'
				},
				name: 'light',tip: true, width:200
			},
			position: {
				corner: {
					target: 'bottomMiddle',
					tooltip: 'topMiddle'
				}
			},
			show: { solo:true }
		});
	},
	function () {
		$(this).qtip("destroy"); // Destroys the tooltip
	}
	);
 
 
});

When I inspect the DOM using Firebug, I notice that a new tooltip is created upon each hover and that it also creates tooltips when hovering out. This quickly piles up and then it crashes the browser.

What am I doing wrong?

Note: The jQuery hover function takes two arguments, the first is the function to execute when hovering in, the second one is ran when hovering out.