Global qtip elements with different content

[camslaz]

Hi All,

In brief, what I want to do is have multiple qtip tooltips on one page but I don't want to have to set the common elements between them all each time I want to display a tooltip.

I want to have something similar to the following

JS Code

$('a.myqtip').qtip({
 
      hide: 'mousedown',
      show: {
                  when: false, // Don't specify a show event
                  ready: false // Show the tooltip when ready
               },
      style: 'qtipinfo',
      position: {
                  corner: {
                     tooltip: 'leftMiddle', // Use the corner...
                     target: 'rightMiddle' // ...and opposite corner
                  }
               }
   })

That would set all links with a class="myqtip" to have the common elements.

Then what I would like is just the ability to set the content with the following

JS Code

$('#testqtip').qtip({
      content: 'This is my tooltip1';   
   })
 
$('#testqtip2').qtip({
      content: 'This is my tooltip2';    
   })

That way I would not have to set the above common elements in every qtip call which would begin to become lengthy get hard to maintain.

Is there a way to set all of the above common elements across all qtips on a page?

The code above is just rough and I don't expect it to work but you get the general idea of what I am trying to achieve

Thanks

[Craig]

Hi camslaz,

This is quite easily achievable like you said if you use an array of content and jQuery's each method:

JS Code

var myContents = [
  'my first tooltip content', 'my second', 'my third', 'you get the idea hopefully!'
];
 
$('a.myqtip').each(function(i) // Notice the 'i' variable which keeps the current element count
{
   $(this).qtip({
      content: myContents[i], // Get the current 'i' variables content
      hide: 'mousedown',
      show: {
         when: false, // Don't specify a show event
         ready: false // Show the tooltip when ready
      },
      style: 'qtipinfo',
      position: {
         corner: {
            tooltip: 'leftMiddle', // Use the corner...
            target: 'rightMiddle' // ...and opposite corner
         }
      }
   });
});

[camslaz]

Thanks Craig... works perfectly!

[jd]

This is one of the most useful trick imo, maybe worse including in the tutorial?

[Craig]

I'll be adding this as a tutorial to the new documentation jd

[pashcan]

Great way to apply common code-shrinking technique. Definitely a tutorial must-have. Thanks for the awesome plugin Craig!