What is used for Googles bubble tips and similar "learning curve" / "getting started" bubble tips?

Question

Today I entered my Google Calendar and there was a little box (bubble tip) explaining that they have implemented a new color palette for calendar events. The box had a small close button at the top right corner. Pretty normal stuff around the web these days.

I'd like something similar on my (Ruby on Rails) site to help new users learn about functionality around the site without having the bubble tip still there on the page once the user becomes acquainted with the functionality.

Does anyone know how such "getting started" bubble tips are made? Is it just a simple cookie being stored on the users computer about whether he has seen (closed) the tip or not?

Is anyone aware of a rails plugin/gem that makes it easy to make these tips?

Thanks :-)

Answer 1

This isn't something that is platform specific, but is usually accomplished on the front end. The server code would only be of concern in writing a condition to the page of whether to start the event.

As far as the front end goes, JS Guiders is an excellent javascript/jQuery plugin that you can use to create a "guided tour" like functionality on your webpages. I have used them in several web applications with success. (I'm not affiliated, just a fan)

To start the tour, you could either store a condition in a DB and then insert it into the javascript, or set a cookie and read it in javascript.

I would recommend storing the condition in a DB though, because it would be quite annoying to have a tip/tour show up on ever new computer I use and App on.

After including jQuery and the Guider script, you can use code like this to create the tour:

$(document).ready(function () {

        guiders.createGuider({
            buttons: [{ name: "Next"}],
            description: "This is the first guider",
            id: "first",
            next: "second", // when the button is pressed, jump to this guider
            overlay: true,
            title: "Guten Tag!"
        });

        guiders.createGuider({
            attachTo: "#logo", // dom element to attach to
            buttons: [{ name: "Close"}],
            description: "This is the second...",
            id: "second",
            overlay: true, // grey out the background to 1/2 opacity
            position: 3, // Clock position (3 o'clock
            title: "Find your way home"
        });

    });

    if(condition){
        guiders.show('first'); // jump into the tour at guider id first
    }

Answer 2

For the functionality that they disappear after closing them, you can extract concept of this announcements railscast - just don't make them sidewide and style them different wuth css: http://railscasts.com/episodes/103-site-wide-announcements