I've seen different type of tooltips around. And actually jQuery tooltip plugin was one of the best I ever seen. And then I thought to build some tooltip similar to those tooltips available on asp.net learning items. Just simple one to be displayed on left or right of the tooltiped item (element). And I decide to build that using jQuery.ui widgets.
Very simple and straight forward, all I needed is the following:
- A tooltip fully UI customizable to be displayed to the right or left of the desired element. And it should detect if the desired element is closer to right or left on the screen; so the tooltip to be displayed correctly to the right or left of the element.
- Ability to control when the tooltip to be displayed, on hover or focus on the element or manually using tooltip widget methods such show and hide.
- Callback upon on show and hide of the tooltip.
- Optional fancy show/hide animations.
I built a sample which you can download to demonstrate how this tooltip should work and you can view the demo here.
Before go through the code, I recommend first to read the following posts:
More...