Javascript Library to add balloon with messages pointing to required input controls

Question

When my web-page loads, user should be prompted to make a few selections in a sequence.

I want message balloons to pop up with messages something like -- "Hey, since you have selected your country, now select the province". These balloons should also point to that particular selection control.

Notice that, these balloons should appear on some method call that would make them live and not when hovered like tooltips

Any suggestions are welcome

Answer 1

Take a look at this plugin: http://zurb.com/playground/jquery-joyride-feature-tour-plugin.

I'm not sure about your html structure, but here is what you do. In your html, every place where you want your 'balloon' to appear you need to specify an anchor id.

(Examples taken from the official documentation)

For example if you want a 'balloon' over the href, then:

/* Joyride can be attached to any element with a unique ID or class, in any order */
<h3 id="yourHeaderID"></h3>
<p class="your-paragraph-class"></p>
<a id="yourAnchorID" href="#url"></a>

After you set up your anchors, you need to define how your balloon should look. For every anchor id your should specify data-attribute with that id, if not specified, then balloon will be attached to body element. Study example below:

/* Each tip is set within this <ol>. */
/* This creates the order the tips are displayed */
<ol id="chooseID">
  /* data-id needs to be the same as the parent it will attach to */
  <li data-id="newHeader">Tip content...</li>

  /* This tip will be display as a modal */
  <li>Tip content...</li>

  /* using 'data-button' lets you have custom button text */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

  /* you can put a class for custom styling */
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>

Then you need to add some javascript magic start to make everything work:

/* Launching joyride when to page is loaded */

<script>
$(window).load(function() {
  $("#chooseID").joyride({
    /* Options will go here */
  });
});
</script>

There are handful of options that you can set, please review the link above.