Woocommerce jquery/ajax/json product hover tooltip

I have a WordPress woocommerce store and on my archive pages I want to hover over the product and have a minimilised view to come up like a tooltip. The hover feature must follow the mouse, and the content that are displayed must be dynamic (pulled from jSON feed).

This is my test store where the products are displayed: http://1clickhere.co.za/testing/affilionaires2/

However, I've just started learning jQuery. So my knowledge is limited. Can someone help and guide me put this together? And what is the easiest way?



Since I have 70+ products, I don't want to go and create these tooltips manually. That's why I want the content to be dynamic.

Can anyone please help?

This is what I want the feature to look like and do (see how it follows the mouse): http://jsfiddle.net/JVDFc/

As I was Googling for answers, I came across lots of bits and pieces and I don't know how to glue it all together. The tooltip popup must only display the title, price, description, rating, category and buy button... for that specific product.