Accessing API Attributes

[Christian]

First of all Craig, really nice work with this plugin. It's a breeze to set up and looks beautiful.

I'm a little confused about how to access certain attributes from within the tooltip, for example:

I have a list of items, each of which has it's own 'control' menu (edit, delete, etc). I am hiding this menu and showing it using qTip. Each item has a class of .item, so in my onload I have something like

JS Code

$('.item').qtip({
  content: $('.menu'),
  show: 'mouseover',
  hide: { fixed: true, delay: 1000 }
});

This, of course is showing every menu for every item on the page within each qTip.

The items are loaded dynamically, so there is no way to know which items will be shown.

What I need to do, is something like this:

JS Code

$('.item').qtip({
  content: $(this + ' .menu'),
  show: 'mouseover',
  hide: { fixed: true, delay: 1000 }
});

where 'this' would represent the actual element that the tooltip is being called on (the element being hovered over). That way I can retrieve the correct .menu into the qTip.

Does that make sense? Any suggestions, I'm having troubles understanding how to use the API - a few examples in the docs would be really handy

Thanks again for a very impressive tooltip library, easily the best for jQuery that I've seen.

[Craig]

Hi Christian,

I think what you're looking for is something similar to this:

JS Code

$('.item').each(function()
{
   $(this).qtip(
   {
      content: $(this).siblings('.menu:first'), // Grab the first menu item that is a sibling of the current .item element
      show: 'mouseover',
      hide: { fixed: true, delay: 1000 }
   });
});

I know the API documentation is somewhat lacking at the moment, and I'll be rectifying this upon the 1.0 release which will include a big update to the documentation, especially the API and missing tutorial sections.

Also, thanks for the words of praise. Always nice to hear positive comments about the library, and I'm glad to see you're finding it easy to setup.

[Christian]

Hi Craig,

I had a different implementation using jQuery's #hover method, but I like your way much better. Thanks a ton for helping me out with this!

Keep up the brilliant work,

Christian