$(document).ready(function()
{
    $('.change_img').each(function()
    {
        $(this).mouseover(function(){

            img_src = $(this).attr("src");
            $('#target_img').attr({
                src: $(this).attr("src")
            });
            $('#target_img').attr({
                tooltip: $(this).attr("extra")
            });
			$('img[tooltip]').each(function()
			{
				$(this).qtip("destroy");
				$(this).qtip({
					content: '<img src='+$(this).attr('tooltip')+'>', // Use the tooltip attribute of the element for the content
					position: {
						corner: {
							target: 'center',
							tooltip: 'center'
						}
					},
					style: {
      					width: 'auto',
						height: 'auto',
						name: 'light'
					},
					hide: { when: { event: 'unfocus' } }
			
				});
			});
        });

    });
   // Notice the use of the each() method to acquire access to each elements attributes
   $('img[tooltip]').each(function()
   {
      $(this).qtip({
         content: '<img src='+$(this).attr('tooltip')+'>', // Use the tooltip attribute of the element for the content
		position: {
			corner: {
				target: 'center',
				tooltip: 'center'
			}
		},
		style: {
			width: 'auto',
			height: 'auto',
			name: 'light'
		},
		hide: { when: { event: 'unfocus' } }
      });
   });
});