You are here

Tipsy NationBuilder

Submitted by Jerimee on September 19, 2011 - 10:04pm

NationBuilder has jQuery plugin Tipsy preloaded. Or, as the case may be, readily available to be loaded.

Tipsy is a jQuery plugin for adding tooltip hovering help text based on an anchor tag's title attribute.

Here's how you load it. Pick the page (or pages) you want to use it with. I suspect it would be best to not load it on pages that don't invoke it, so pick the appropriate level of template file. If you're only going to use it on one page just edit that individual page's template. Edit your template and paste the script at bottom:

<script src="jquery.tipsy.js" type="text/javascript"></script>
Then you can associate it with a selector (in this case id #mytooltip):

  1. <script type='text/javascript'>
  2. $(window).load(function() {
  3.     $('#mytooltip').tipsy();
  4.   });
  5. </script>

Then you can select where the tool tip goes by using that selector. Like this:

  1. <a id="mytooltip" href="#" original-title="Hello World">Hover over me</a>

There's a bunch of advanced configuration options described at Tipsy's home page.

So here is all the code together with two config options set:

  1. <div><a id="tip-goes-here" href="#" greeting="Hiya Universe">Hover over me</a></div>
  2. <script src="jquery.tipsy.js" type="text/javascript"></script>
  3. <script type='text/javascript'>
  4. $(window).load(function() {
  5.     $('#tip-goes-here').tipsy({
  6.       gravity: 'w', //tip is to the right of the element
  7.       title: 'greeting' //tip text can now be passed via a "greeting" attribute
  8.     }); 
  9.   });
  10. </script>