Reputation: 5920

Overlay Help Tips with jQuery

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: jquery overlay website help tips

Upvotes: 10

Answers (5)

John

Reputation: 31

Another good plugin seems to be chardin http://heelhook.github.io/chardin.js/

Upvotes: 3

guilleva

Reputation: 1311

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

Upvotes: 20

Richard Neil Ilagan

Reputation: 14747

First you'll have to learn how to create an overlay. That's easily done with a bit of elementary CSS.

The stuff that show the help stuff (your PNG images) are going to be contained inside the overlay element (which is most probably a div). You're going to have to position them around, and you can choose to do that with pure CSS, or use something like jQuery UI's Position helper to help you out.

Lastly, you're going to need a bit of Javascript / jQuery to kick off the toggling of the overlay. You want to read up on events in jQuery. Most probably, you're going to be attaching on click.

Upvotes: 1

srini.venigalla

Reputation: 5145

Take a look at Impromptu plugin

http://trentrichardson.com/Impromptu/

Upvotes: 9

Rob Lowe

Reputation: 827

Sounds like you are looking for something like Colorbox

Upvotes: 0

Overlay Help Tips with jQuery

Answers (5)

Related Questions