Commits

Seb Ruiz committed c01d623

AUI-1173: Update tipsy

Forked tipsy to include the following fixes:
* Adds support for aria accessability roles
* Wrap correctly on long strings
* Add an option, 'hoverable' which prevents the tooltip from hiding when the cursor enters the tooltip

Forked repository location: https://github.com/sebr/tipsy

Comments (0)

Files changed (2)

auiplugin/src/main/resources/experimental/css/external/jquery/jquery.tipsy.css

-.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
+.tipsy { font-size: 10px; position: absolute; padding: 5px; word-wrap: break-word; z-index: 100000; }
   .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
 
   /* Rounded corners */
   .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
-
+  
   /* Uncomment for shadow */
   /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
-
+  
   .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
-
+  
   /* Rules to colour arrows */
   .tipsy-arrow-n { border-bottom-color: #000; }
   .tipsy-arrow-s { border-top-color: #000; }
   .tipsy-arrow-e { border-left-color: #000; }
   .tipsy-arrow-w { border-right-color: #000; }
-
+  
 	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
     .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
     .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}

auiplugin/src/main/resources/experimental/js/external/jquery/jquery.tipsy.js

       }
       return false;
     };
+
+    var tipsyIDcounter = 0;
+    function tipsyID() {
+        var tipsyID = tipsyIDcounter++;
+        return "tipsyuid" + tipsyID;
+    };
     
     function Tipsy(element, options) {
         this.$element = $(element);
                 $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
                 $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
                 $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
+
+
+                var that = this;
+                function tipOver() {
+                    that.hoverTooltip = true;
+                }
+                function tipOut() {
+                    if (that.hoverState == 'in') return;  // If field is still focused.
+                    that.hoverTooltip = false;
+                    if (that.options.trigger != 'manual') {
+                        var eventOut = that.options.trigger == 'hover' ? 'mouseleave.tipsy' : 'blur.tipsy';
+                        that.$element.trigger(eventOut);
+                    }
+                }
                 
+                if (this.options.hoverable) {
+                    $tip.hover(tipOver, tipOut);
+                }
+
                 var pos = $.extend({}, this.$element.offset(), {
                     width: this.$element[0].offsetWidth,
                     height: this.$element[0].offsetHeight
                 } else {
                     $tip.css({visibility: 'visible', opacity: this.options.opacity});
                 }
+
+                if (this.options.aria) {
+                    var $tipID = tipsyID();
+                    $tip.attr("id", $tipID);
+                    this.$element.attr("aria-describedby", $tipID);
+                }
             }
         },
         
             } else {
                 this.tip().remove();
             }
+            if (this.options.aria) {
+                this.$element.removeAttr("aria-describedby");
+            }
         },
         
         fixTitle: function() {
         
         tip: function() {
             if (!this.$tip) {
-                this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
+                this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>').attr("role","tooltip");
                 this.$tip.data('tipsy-pointee', this.$element[0]);
             }
             return this.$tip;
         }
         
         options = $.extend({}, $.fn.tipsy.defaults, options);
+        if (options.hoverable) {
+            options.delayOut = options.delayOut || 200;
+        }
         
         function get(ele) {
             var tipsy = $.data(ele, 'tipsy');
             if (options.delayOut == 0) {
                 tipsy.hide();
             } else {
-                setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
+                setTimeout(function() { if (tipsy.hoverState == 'out' && !tipsy.hoverTooltip) tipsy.hide(); }, options.delayOut);
             }
         };
         
         
         if (options.trigger != 'manual') {
             var binder   = options.live ? 'live' : 'bind',
-                eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus',
-                eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
+                eventIn  = options.trigger == 'hover' ? 'mouseenter.tipsy' : 'focus.tipsy',
+                eventOut = options.trigger == 'hover' ? 'mouseleave.tipsy' : 'blur.tipsy';
             this[binder](eventIn, enter)[binder](eventOut, leave);
         }
         
     };
     
     $.fn.tipsy.defaults = {
+        aria: false,
         className: null,
         delayIn: 0,
         delayOut: 0,
         gravity: 'n',
         html: false,
         live: false,
+        hoverable: false,
         offset: 0,
         opacity: 0.8,
         title: 'title',
      *        component.
      */
      $.fn.tipsy.autoBounds = function(margin, prefer) {
-		return function() {
-			var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
-			    boundTop = $(document).scrollTop() + margin,
-			    boundLeft = $(document).scrollLeft() + margin,
-			    $this = $(this);
+        return function() {
+            var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
+                boundTop = $(document).scrollTop() + margin,
+                boundLeft = $(document).scrollLeft() + margin,
+                $this = $(this);
 
-			if ($this.offset().top < boundTop) dir.ns = 'n';
-			if ($this.offset().left < boundLeft) dir.ew = 'w';
-			if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
-			if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
+            if ($this.offset().top < boundTop) dir.ns = 'n';
+            if ($this.offset().left < boundLeft) dir.ew = 'w';
+            if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
+            if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
 
-			return dir.ns + (dir.ew ? dir.ew : '');
-		}
-	};
+            return dir.ns + (dir.ew ? dir.ew : '');
+        }
+    };
     
 })(jQuery);