jquery ui tooltip manual open /close

Question

is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind t

Answer 1

Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.

Edit: Separated autoHide and autoShow as two separate flags as suggested by @MscG

Demo Here: http://jsfiddle.net/BfSz3/

(function( $ ) {
  $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
      autoHide:true,
      autoShow: true
    },

    _create: function() {
      this._super();
      if(!this.options.autoShow){
        this._off(this.element, "mouseover focusin");
      }
    },

    _open: function( event, target, content ) {
      this._superApply(arguments);

      if(!this.options.autoHide){
        this._off(target, "mouseleave focusout");
      }
    }
  });

}( jQuery ) );

Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:

 $(someDOM).tooltipX({ autoHide:false }); 

And just directly perform standard open/close calls in your code as needed elsewhere

 $(someDOM).tooltipX("open"); // displays tooltip
 $(someDOM).tooltipX("close"); // closes tooltip

A simple hotfix, until I have the time to do official pull request, this will have to do.