Best way to setup qtip use

[SuneR]

I have just started looking at qtip, and so far it seems to do what I want

I'd better start with a description of what I need to do. I have a image, and on top of this image, I want to playce numerous div tags (with a background and other effects). On each of these div tags, I want to show a tooltip on mouseover. The content for each of these divtags is ofcourse different, and are based on our CMS. But basically I need to be able to set the content for each tooltip.

I want to keep the code as short and clean as I can, but I cant quite figure out how to set 10+ tooltips that need to have the same look, without having lots of redundant code. I saw in another post on the forums that you can use the object $.fn.qtip.defaults to override the defaults with your own - but I cant get it working.

How would you setup the HTML and javascript?

Right now I have a div containing the image, and x number of div's. My stylesheet then position the t_tooltip_X divs on top of the image, and the javascript you can see further below adds qtip tooltips to everything with the t_tip class.

JS Code

<div id="t_bill_background">
      <img src="gfx/Regning_03.jpg">
      <div id="t_tooltip_1" class="t_tip"></div>
      <div id="t_tooltip_2" class="t_tip"></div>         
   </div>

It is my intention to set the content of each of the tooltip's refrencing the ID of the div tag afterwards.
I have tried to use the API to access the content of a given tooltip, but this seems buggy, or at least I cant figure out why it does not work.

JS Code

$(document).ready(function(){
 
   $.fn.qtip.defaults = {
      show: "mouseover",
      hide: "mouseout"
   });
 
   $('#t_bill_background .t_tip').qtip({
      content: 'This is an active list element',
       show: 'mouseover',
       hide: 'mouseout',
       position: {
          corner: {
             target: 'topRight',
             tooltip: 'bottomLeft'
            }
         },         
      style: { 
            width: 200,
            padding: 5,
            background: '#A2D959',
            color: 'black',
            textAlign: 'center',
            border: {
               width: 7,
               radius: 5,
               color: '#A2D959'
            },
            tip: 'bottomLeft',
            name: 'light'
         },
         beforeRender: function(){
            console.log("mef");
         }
   });
 
   var myTmp = $('#t_bill_background #t_tooltip_1').qtip("api");
   myTmp.updateContent("Lorem ipsum dolor sit amet");
 
});

This is the tooltip code I have tried. As you can see, I have tried to use the api at the bottom, after I have added the tooltips. But when I view the page, the tooltip content does not update. However, if I copy and paste the following into the Firebug console and run it, the tooltip content is updated just fine. Is this a bug or am I just not using the API right?

JS Code

var myTmp = $('#t_bill_background #t_tooltip_1').qtip("api");
myTmp.updateContent("Lorem ipsum dolor sit amet");

Is there a better and more efficient way todo what I am trying to do?

[Craig]

Hey SuneR,

Take a look at this code, it should be helpful to you. Basically it's pretty similar to what you've done, except it uses a custom defaults object which is safer in this sense, since you're never overwriting the actual defaults with possible null/wrong values.

JS Code

// Setup some defaults
var defaults = {
   position: {
      corner: {
         target: 'topRight',
         tooltip: 'bottomLeft'
      }
   },
   style: {
      width: 200,
      padding: 5,
      background: '#A2D959',
      color: 'black',
      textAlign: 'center',
      border: {
         width: 7,
         radius: 5,
         color: '#A2D959'
      },
      tip: 'bottomLeft',
      name: 'light'
   }
}
 
$(document).ready(function()
{
   // Use the each method to gai naccess to each element via $(this)
   $('#t_bill_background .t_tip').each(function()
   {
      $(this).qtip(
         $.extend(true, defaults, { // Extend your own defaults object
            content: {
               text: $(this).attr('tooltipcontent'), // Load content from a tag?
               url: 'tooltipcontent.php', // Load content dynamically?
               data: { id: $(this).attr('tooltipid') } // Send along a tooltip ID attribute?
            }
         })
      }});
   });
});