10

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

adamdehaven
  • 5,890
  • 10
  • 61
  • 84

5 Answers5

20

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

guilleva
  • 1,301
  • 11
  • 13
9

Take a look at Impromptu plugin

http://trentrichardson.com/Impromptu/

srini.venigalla
  • 5,137
  • 1
  • 18
  • 29
  • I like the 'tour' feature at the bottom, but it doesn't seem to give you the markup needed to implement? (or am i missing something?) – adamdehaven May 17 '12 at 16:28
  • Impromptu Tour is exactly what I wanted. Now I'm having another issue though... see here: http://stackoverflow.com/questions/10653471/css-overlay-effect-exclude-certain-container – adamdehaven May 18 '12 at 15:36
  • 1
    If you're looking for tour plugins, i highly recommend zurb's [jQuery Joyride website tour plugin](http://zurb.com/playground/jquery-joyride-feature-tour-plugin). Otherwise @guilleva's answer is exactly what you're looking for! – colllin Sep 09 '13 at 17:12
3

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

John
  • 31
  • 1
1

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.

Richard Neil Ilagan
  • 14,627
  • 5
  • 48
  • 66
  • If you don't understand it, I'll be glad to explain it a bit more. The others are suggesting plugins; I'm trying to tell you how to do it yourself. – Richard Neil Ilagan Jan 24 '14 at 07:25
0

Sounds like you are looking for something like Colorbox

Rob Lowe
  • 827
  • 6
  • 10