We use jQuery library qTip for custom tooltips and select boxes (http://craigsworks.com/projects/qtip/).

This library is highly customizable. You can use it for variety of things, even for modal boxes (http://craigsworks.com/projects/qtip/demos/).

But as any new JavaScript library it does produce a variety bugs as well. Luckily for us the library has API (http://craigsworks.com/projects/qtip/docs/api/) using which you can work-around some issues.

Three of API methods that we use in Youtego are destroy, hide and updateContent.

- destroy: qTip has one tricky bug, when you remove the item which has “qtip” and, without taking away the mouse cursor from that item, load in it’s place another item with “qTip” it keeps the old item’s tooltip. So, you must make a call to destroy method which will eliminate the old tooltips.

- hide: When qTip is used as custom drop down menu, appears an issue to hide the drop down after clicking on one of options. The hiding of the tooltip when you click in outside area can be handled by qTip, you can bind hide method on ‘unfocus’ event, but to handle the events inside the tooltip’s HTML you must do it by yourself.

- updateContent: As HTML select element wasn’t born to be customizable wich CSS we chose qTip to drow some of our select options.

Because the content of “qTip” imitating drop down menu changes (the checked symbol resides near the option which is selected) we must change the tooltip’s content HTML. updateContent method solves this issue just fine.

Other thoughts

This library should be used with some amount of caution: every time when qTip’s toolpit appears your HTML body get’s bigger, the library creates hidden copies of tooltips. So, if your page has lots of items which should have tooltips, don’t hurry to use qTip for that.

Some conclusion

Use qTip when you want to have “younique” stylish controls.

Don’t use qTip when simple tooltip’s enough, “qTip”s can give you a hard time handling them, trust me.

Youtego Development Team