Overlay Help Tips with jQuery

Question

I would like to create an overlay layer that pops up if a user clicks a 'help' link that displays help tips (most likely a .png image) pointing out elements of the website.

I've seen this done on other websites (although I can't currently find one) whereby there is a semi-transparent overlay over the entire page whereby help tips are shown. I would then like the overlay to disappear if the user clicks or click on a 'close' button.

I understand that is a lot to ask, but if anyone could point me in the right direction, or to an online tutorial, etc. I'd REALLY appreciate it :)

Here is an example of the effect I want to create on my website:

Answer 1

Take a look at Chardin.js, it's pretty nice and easy to implement