jQuery Forum

Right now, Im working on a set of tooltips (using Jquery library Qtip2) to trigger from a php array.  Essentially the php array's items are generated from Wordpress, using a custom field manager.  In this case, Wordpress can generate the array using an output filter.

The purpose? Having qtip load all cluetips which correspond to values given in this array (see attached image for a look at those values from the backend where they can be clicked on or off on whether they display on the front end or not.  This is so that I can activate what product features are available for a particular custom item which we make)  Based on what values come back for that product (i.e. what items are checked vs the ones that are not), I need each option that shows to have a hover action which will display a tooltip that has text/images which provide additional info on the option that they are mousing over.

If outputted raw I must put this in my php page:

1. <?php print_custom_field('product_options'); ?>

If I set the output filter to "Set Default Value" I use this in the code:

1. <?php print_custom_field('product_options:default', '<em>unknown</em>'); ?>

If I use a formatted list, than this is what I would have to use:

1. <?php print_custom_field('product_options:formatted_list', array('<li>[+value+]</li>','<ul>[+content+]</ul>') ); ?><br />

I have mostly been looking towards outputting it as a to_array, as making the most sense.  This is what I have come up with:

1. $my_array = get_custom_field('product_options');
2. $count = 1;
3. foreach ($my_array as $item) {
4.     echo '<div>' ;
5.     print $item;
6.     echo '</div><div class="additinfo'.$count.'">Tooltip information</div>';
7.     $count++ ;
8. }
9. ?><br />

Simply put, I am not sure where I would set the conditional statements (if/then or case/switch or otherwise) that will display ONLY the tooltips which correspond to the values of that array which actually show up.

Any ideas if this process is before or after using JSON to pass it to jquery and issuing a selector (div ID/class more than likely)?

My question directly is in concern to the following plugin, although the answer will help me deal with other plugins of the future:

http://plugins.learningjquery.com/cluetip/#options

Basically, I have 2 instances of this plugin used within my pages.  Physically, the 2 menu buttons are clsoe together.  So, with the default settings of the plugin, the cluetip that appears is not in the right place on one of the 2 instances.  So with the second instance needing some modification away from the default parameters of thhe plugin, where do I make that "override" for just that one instance out of the two -- the cluetip's CSS file or using the options/API that appears in the above link by citing the override by the corresponding div that the second cluetip is in?

Overall the concept of API within jquery specifically confuses me.  So when the above page is under a "API/Options" title for the page, it confuses me as to what is the API--the options detailed there, or what?  Im not visually editing these objects, (Im doing it by hand in code), so why do they call it API?