jQueryUI mods to make tooltip stay open when hovered over

Tooltip setup function (caller for this function is inside document.ready):


      function setupTooltips() {
        $(function() {
          $(".ui-tooltip").live("mouseleave",function(){
            setTimeout("$(document).tooltip('enable')",500);$(document).tooltip("disable");
          });

          $(document).tooltip({
            position: {
              my: "center bottom",
              at: "center top+5",
              collision: "fit custom",
              using: function( position, feedback ) {
                $( this ).css( position );
                $( "<div>" )
                .addClass( "arrow" )
                .attr("id","arrow-"+$(this).attr("id"))
                .addClass( feedback.vertical )
                .html("<div class='arrowdiv' id='arrowdiv-" + $(this).attr("id") + "'></div>")
                .appendTo( "#content-" + $(this).attr("id") );
              }
            },
            show: { delay: 300 },
            hide: { delay: 300 },
            content: function() {
              var element = $(this);
              var title = element.attr("title");
              var descr = element.attr("description");
              if (title.indexOf("/") > -1) {
                 var data = $.ajax({
                              url: title,
                              async: false,
                              success: function(data) {
                                return data;
                              }
                            });
                return "<div class='ttipContent'><span class='noticeTitle'>" + descr + "</span><br>" + data.responseText + "</div>";
              } else {
                var tooltip = element.attr("title");
                if ((tooltip != "") && (tooltip != null)) {
                  return("<div class='ttipContent'>" + tooltip + "</div>");
                }
              }
            }
          });
        });
      }


Changes to JqueryUI code itself:



Changes to the position function to add a new "custom" collision handler
...
//NEW_CUSTOM through next NEW_CUSTOM
        custom: {
          left: function(position, data) {
            var initPos = position.left;
            $.ui.position.flip.left(position, data);
          },
          top: function(position, data) {
            var initPos = position.top;
            $.ui.position.flip.top(position, data);
            if (initPos != position.top) {
              setTimeout("$('#arrow-" + data['elem'].attr('id') + "').addClass('tooltipFlip')",50);
              setTimeout("$('#arrowdiv-" + data['elem'].attr('id') + "').addClass('tooltipFlip')",50);
            }
          }
        }
// NEW_CUSTOM
};
...


Changes to the tooltip mouseover code, so that it will determine if the element that spawned the tooltip has a particular class. If it does, it overrides the "events.mouseleave" function, looking at what element the mouse goes to when it leaves the element that spawned the tooltip.

...
                if ( !event || event.type === "mouseover" ) {
//NEW_CUSTOM through next NEW_CUSTOM, except for noted line of code (which was the original)
                        var myElem = target.attr("id");
                        if ($("#"+myElem).hasClass("dynamicTooltip")) { //Tooltip has dynamic content

                                events.mouseleave = function( event ) {
                                        var myClass = "";
                                        if (event.toElement) {
                                                var elem = event.toElement;
                                                myClass = elem["className"];
                                        } else if (event.relatedTarget) {
                                                var elem = event.relatedTarget;
                                                myClass = elem["className"];
                                        }
                                        myClass = $.trim(myClass);
                                        if (myClass != "ui-tooltip") {
                                                var that = this,
                                                target = $( event ? event.currentTarget : this.element ),
                                                tooltip = this._find( target );

                                                if ( this.closing ) {
                                                        return;
                                                }

                                                if ( target.data( "ui-tooltip-title" ) ) {
                                                        target.attr( "title", target.data( "ui-tooltip-title" ) );
                                                }

                                                removeDescribedBy( target );

                                                tooltip.stop( true );
                                                this._hide( tooltip, this.options.hide, function() {
                                                        that._removeTooltip( $( this ) );
                                                });

                                                target.removeData( "tooltip-open" );
                                                this._off( target, "mouseleave focusout keyup" );

                                                if ( target[0] !== this.element[0] ) {
                                                        this._off( target, "remove" );
                                                }
                                                this._off( this.document, "mousemove" );

                                                if ( event && event.type === "mouseleave" ) {
                                                        $.each( this.parents, function( id, parent ) {
                                                                parent.element.title = parent.title;
                                                                delete that.parents[ id ];
                                                        });
                                                }
                                                this.closing = true;
                                                this._trigger( "close", event, { tooltip: tooltip } );
                                                this.closing = false;
                                        }
                                }
                        } else { //Just a basic tooltip
                                events.mouseleave = "close"; //The original jQuery code
                        }
//End NEW_CUSTOM
                }
...



Changes to the tooltip creation code, adding a wrapper div around the tooltip itself. This is because we have a "beak" on our tooltip that points to the element being hovered over. If we don't have this wrapper div, trying to figure out if the mouse went to the tooltip becomes much more difficult since it could go to the "beak," or to the container of the element being hovered over (if you go from the element to the toolip directly without moving over the "beak" first.)

...
        _tooltip: function( element ) {
//NEW_CUSTOM through next NEW_CUSTOM

                var id = "ui-tooltip-" + increments++,
                        tooltip = $( "<div>" )
                                .attr({
                                        id: id,
                                        role: "tooltip"
                                })
                                .addClass( "ui-tooltip " +
                                      ( this.options.tooltipClass || "" ) ),
                        shell = $("<div>")
                                .attr({
                                        id: "shell-" + id
                                })
                                .addClass( "ui-tooltip-shell ui-widget ui-corner-all ui-widget-content " +
                                      ( this.options.tooltipClass || "" ) )
                                .appendTo(tooltip);

                        $( "<div>" )
                                .addClass( "ui-tooltip-content" )
                                .attr({
                                        id: "content-" + id
                                })
                                .appendTo( shell );
//NEW_CUSTOM

//jQuery Original bits
//              var id = "ui-tooltip-" + increments++,
//                      tooltip = $( "<div>" )
//                              .attr({
//                                      id: id,
//                                      role: "tooltip"
//                              })
//                              .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " +
//                                      ( this.options.tooltipClass || "" ) );
//
//              $( "<div>" )
//                      .addClass( "ui-tooltip-content" )
//                      .appendTo( tooltip );

                tooltip.appendTo( this.document[0].body );
                if ( $.fn.bgiframe ) {
                        tooltip.bgiframe();
                }
                this.tooltips[ id ] = element;
                return tooltip;
        },