Create tooltip only on mouseenter

source/Ox.UI/js/Core/Element.js

@@ -90,6 +90,8 @@ Ox.Element = function(options, self) {
     // stack of callbacks bound to option updates
     self.updateCallbacks = self.updateCallbacks || [];
 
+    self.boundTooltipEvents = {};
+
     // create public object
     var that = new Ox.JQueryElement($(self.options.element || '<div>'))
         .addClass('OxElement')
@@ -104,6 +106,14 @@ Ox.Element = function(options, self) {
 
     setTooltip();
 
+    function bindTooltipEvents(events) {
+        that.off(Ox.filter(self.boundTooltipEvents, function(value, key) {
+            return !events[key];
+        })).on(self.boundTooltipEvents = Ox.filter(events, function(value, key) {
+            return !self.boundTooltipEvents[key];
+        }));
+    }
+
     function mousedown(e) {
         /*
         better mouse events
@@ -216,11 +226,14 @@ Ox.Element = function(options, self) {
     }
 
     function mouseenter(e) {
+        if (!that.$tooltip) {
+            that.$tooltip = Ox.Tooltip({title: self.options.tooltip});
+        }
         that.$tooltip.show(e);
     }
 
     function mouseleave(e) {
-        that.$tooltip.hide();
+        that.$tooltip && that.$tooltip.hide();
     }
 
     function mousemove(e) {
@@ -266,22 +279,26 @@ Ox.Element = function(options, self) {
     function setTooltip() {
         if (self.options.tooltip) {
             if (Ox.isString(self.options.tooltip)) {
-                that.$tooltip = Ox.Tooltip({title: self.options.tooltip});
-                that.on({mouseenter: mouseenter}).off({mousemove: mousemove});
+                bindTooltipEvents({
+                    mouseenter: mouseenter,
+                    mouseleave: mouseleave
+                });
+                that.$tooltip && that.$tooltip.options({
+                    title: self.options.tooltip,
+                    animate: true
+                });
             } else {
                 that.$tooltip = Ox.Tooltip({animate: false});
-                that.on({mousemove: mousemove}).off({mouseenter: mouseenter});
-            }
-            that.on({mouseleave: mouseleave});
-        } else {
-            if (that.$tooltip) {
-                that.$tooltip.remove();
-                that.off({
-                    mouseenter: mouseenter,
+                bindTooltipEvents({
                     mousemove: mousemove,
                     mouseleave: mouseleave
                 });
             }
+        } else {
+            if (that.$tooltip) {
+                that.$tooltip.remove();
+            }
+            bindTooltipEvents({});
         }
     }
 

source/Ox.UI/js/Form/Button.js

@@ -48,9 +48,12 @@ Ox.Button = function(options, self) {
             }) : options || {})
             .update({
                 disabled: setDisabled,
-                //FIXME: check if this is still needed
                 tooltip: function() {
-                    that.$tooltip.options({title: self.options.disabled});
+                    if (Ox.isArray(self.options.tooltip) && that.$tooltip) {
+                        that.$tooltip.options({
+                            title: self.options.tooltip[self.value]
+                        });
+                    }
                 },
                 title: setTitle,
                 value: function() {
@@ -106,6 +109,11 @@ Ox.Button = function(options, self) {
 
     if (Ox.isArray(options.tooltip)) {
         self.options.tooltip = options.tooltip;
+        // Ox.Element creates tooltip only on mouse over.
+        // create here to overwrite tooltip title
+        if (!that.$tooltip) {
+            that.$tooltip = Ox.Tooltip();
+        }
         that.$tooltip.options({
             title: self.options.tooltip[self.value]
         });

source/Ox.UI/js/Menu/MenuButton.js

@@ -118,7 +118,7 @@ Ox.MenuButton = function(options, self) {
         that.gainFocus();
         that.addClass('OxSelected');
         from != 'button' && self.$button.options({value: true});
-        self.options.tooltip && that.$tooltip.hide();
+        that.$tooltip && that.$tooltip.hide();
         self.$menu.showMenu();
         that.triggerEvent('show');
     }