Threaded Mode | Linear Mode

***Craig***

At the moment there isn't any updated documentation on the latest branch releases as they are under heavy re-design as you said. A lot of code has been re-factored and many new features added. Here's a short list of changes you'll need to be aware of:

1) All styles are now done via the jquery.qtip.css file. In order to apply styles now, use the style.classes option to define what extra classes the main tooltip element will have, and migrate over your styles object to a CSS class e.g.

CSS Code

div.ui-tooltip-myStyle{
   max-width: 350,
   min-width: 100,
   color: 'red'
}

JS Code

$('.selector').qtip({
   content: 'Testing new styles',
   style: {
      classes: 'ui-tooltip-myStyle'
   }
})

2) Related to the above, the style.classes attribute is no longer an object, but a string containing space-separated class names to be applied to the tooltip. This allows you to specify different styles for your tooltip i.e. ui-tooltip-blue. Check the CSS file for names of more of these built-in styles.

3) No rounded corners! This feature has been moved into it's own separate jQuery plugin under the name qCorner, but it's not nearly stable enough to release to the branch, but keep an eye out of updates on this. You can however use border-radius to simulate this, but be aware it won't work in IE.

4) Assigning multiple tooltips to a single element is no longer supported, and the $.fn.qtip.interfaces object has disappeared. If you require more than one tooltip per element, you can be bit hacky and simply remove the data('qtip') reference from the object like so:

JS Code

$('elem').removeData('qtip')

5) All qTips are now assigned a unique ID on creation along the lines of: ui-tooltip-<integer or custom id here>. You can set the custom id using the id property:

JS Code

$('.selector').qtip({ id: 'myTooltip' });

Not only that, but your title and content elements are also assigned a similar id:
#ui-tooltip-<integer or custom id here>-title
#ui-tooltip-<integer or custom id here>-content

7) Library now uses a standard getter/setter 'option' method for the API much like the jQuery UI plugins, so if you need to retrieve/change an option of your tooltip use:

JS Code

$('.selector').qtip('option', 'content.text');
$('.selector').qtip('option', 'content.text', newValue);

Note: Non-prerendered tooltips now get their properties set unlike in 1.0

8) The library now optionally utilises the metadata plugin, allowing you to specify tooltip attributes on a per-element basis.

9) Several features as of this writing have been moved to their own separate files, most notably:
* AJAX functionality (jquery.qtip.ajax.js)
* Speech bubble tips (jquery.qtip.tips.js)
* Imagemap support (jquery.qtip.imagemap.js)

When including the files above, make sure to include after the main library file (jquery.qtip.js)

10) The API object no longer exists, but a new events object replaces it, which currently has 6 options:

JS Code

events: {
   render: function(event, api){},
   move: function(event, api, newPosition){},
   show: function(event, api){},
   hide: function(event, api){},
   focus: function(event, api, zIndex){},
   blur: function(event, api, zIndex){}
}

These work in much the same way as the callbacks, except that you can now assign multiple callbacks to the tooltip using the bind functionality e.g.

JS Code

$('#ui-tooltip-myTooltip').bind('tooltip<eventname>', function(event, api, [extra args of event]) { });

Take a look in the modal plugin for better examples of this

11) Positioning has been upgraded. Corner strings should be space separated with 'middle' now being replaced with 'center'. The corner object is now abolished and the corner.tooltip and corner.target have been moved to position.my and position.at respectively:

JS Code

// Old code
position: { 
   corner: { 
      tooltip: 'topLeft', // This becomes position.my
      target: 'bottomMiddle' // This becomes position.at
   }
}

JS Code

// New nicer code
position: { 
   my: 'top left', 
   at: 'bottom center'
}

12) position.type and position.adjust.scroll have disappeared. Declare them in the CSS instead using the position attribute (position: fixed for scroll adjustment).

13) Multiple hide and show events can be used by using space separated event names:

JS Code

show: 'mouseover click'
hide: 'unfocus mouseout'

14) hide.when object has merged with its parent object, so hide.when.event and hide.when.target are now hide.event and hide.target respectively. Same for show.

15) Special 'inactive' event in 1.0 has moved to its own option, hide.inactive, which takes a set length (in miiliseconds) as its value.

JS Code

hide: {
   inactive: 2000
}

16) hide.effect and show.effect now take functions as there values. effect.length no longer applies.

17) $("*").qtip('method') shortcut methods are as listed below, and are now the preferred way to call the arguments, which can now also be passed arguments:

JS Code

// Bracketed arguments are optional
$('.selector').qtip('option', name, [value]);
$('.selector').qtip('disable', boolean);
$('.selector').qtip('focus', [event]);
$('.selector').qtip('toggle', boolean, [event]);
$('.selector').qtip('hide', [event]);
$('.selector').qtip('show', [event]);
$('.selector').qtip('reposition', [event]);
$('.selector').qtip('destroy');

That's all I can think of for now, but around 75% of the options are exactly the same, and the library itself is much smaller once YUICompressed (Around 19Kb as of this). Let me know if you need any further assistance.

FlashJunior

Very nice. Good work!

For those who asked themselves how to add "Speech bubble tips" add this file to your page:

JS Code

jquery.qtip.tips.js

Then simply add in your tip preferences as in 1.0 like so:

JS Code

style: {
    classes: 'ui-tooltip-red', // Optional
    tip: {
        corner:true
    }
}

I've tested it with jquery 1.4.2 on IE6, 7 and 8 and it WORKS!!!

buggedcom

Hi Craig.
Will border opacity be supported in v2?

***Craig***

buggedcom, unfortunately not. qTip2 will likely be strictly CSS compliant for styling, including border-radius. This is to keep in line with jQuery's ThemeRoller specifications.

buggedcom

Ok thanks for getting back to me.

buggedcom

actually, I've discovered you can use an CSS3 property 'rgba(82, 82, 82, 0.698)' for setting the colour AND opacity of the border and tip

Naunaud

It works smoothly on all the browsers I tested.
Very nice work craig.
Can you already provide a little more documentation on the replacement of api: {} by events: {}?

Kind regards,

Naunaud.

And I forgot to ask, has something change with disable and enable?
Because the code I used to enable and disable the qTip on my event drag/resize doesn't seem to work at all with qTip 2.0.

Kind regards,

Naunaud.

Ok, so it seems I don't need to check for my dragStop and resizeStop of my events in my calendar with qTip 2.0.
I just need to call 'hide' when I start a drag or a resize.
And so far so good, it's working well with jQuery 1.4.2, jQueryUI 1.8 and fullCalendar 1.4.5 with perfect themeroller support.

Kind regards,

Naunaud.

PS: I hope I'm not flooding too much...

***Craig***

Great to hear Naunaud, and no your questions are always welcome! I've added some more details on the events engine to the first post.

Naunaud

Thanks for the details, now I got my timeout working on my tooltips.
I'm looking forward to the official release.

Kind regards,

Naunaud.

brant

I decided to give 2.0 a try and couldn't get either method to work. Sad

My first attempt was to have qtip grab the next hidden .tooltipContent div:

JS Code

$('.ttip').each(function() // Select the "ttip" class
            {
               $(this).qtip({ 
                   content: $(this).next('.tooltipContent')
               }); 
            });

HTML:

JS Code

<li><a class="ttip name" href="/something"></a></li>
 
<div class="tooltipContent" style="display: none">
   <h3>My Title</h3><p>Content</p>
</div>	
 
And the pattern repeats. . .

There's no error, but it doesn't work.

My second question involves the ajax call. I'm just trying to do a test call to see if it works:

JS Code

$(".ttipa").qtip({
   content: {
      url: '/ajax_pu.php',
      data: { id: 5 },
      method: 'get'
   }
});

Though I can't get that to work either. Sad

I suppose I should have waited for the 2.0 documentation, but I just can't help myself ;X

BeArt

Another change that was not posted here, is that the updatePosition had been renamed to reposition!

JS Code

$("*").qtip("updatePosition")

becomes

JS Code

$("*").qtip("reposition")

We are already using qtip 2.0 in our QA systems. Will be going live end of the month. Hopefully the 2.0 is out by then! When 2.0 will come out, I will relelease an updated JQuery plugin to be used in various smalltalk dialects (Visual Works and Visual Age first)

nolan

(9th April 15:52)brant Wrote: I decided to give 2.0 a try and couldn't get either method to work. Sad

My first attempt was to have qtip grab the next hidden .tooltipContent div:

JS Code

$('.ttip').each(function() // Select the "ttip" class
            {
               $(this).qtip({ 
                   content: $(this).next('.tooltipContent')
               }); 
            });

HTML:

JS Code

<li><a class="ttip name" href="/something"></a></li>
 
<div class="tooltipContent" style="display: none">
   <h3>My Title</h3><p>Content</p>
</div>	
 
And the pattern repeats. . .

There's no error, but it doesn't work.

Brant, I think the reason for the first one not working is that your content selector is wrong: "$(this).next('.tooltipContent')". The ".next()" selector looks at siblings, but in this case you need to be looking at the <li>'s siblings. I haven't had a chance to try it out, but this should work: "$(this).parent().next('.tooltipContent')".