instant tab tooltips

node_modules/ace/lib/ace/tooltip.js

@@ -132,6 +132,13 @@ function Tooltip (parentNode) {
         return this.getElement().offsetWidth;
     };
     
+    this.destroy = function() {
+        this.isOpen = false;
+        if (this.$element && this.$element.parentNode) {
+            this.$element.parentNode.removeChild(this.$element);
+        }
+    };
+
 }).call(Tooltip.prototype);
 
 exports.Tooltip = Tooltip;

plugins/c9.ide.editors/pane.js

@@ -16,6 +16,9 @@ define(function(require, module, exports) {
         var anims = imports.anims;
         var apf = imports.apf;
         
+        var Tooltip = require("ace/tooltip").Tooltip;
+        var tooltip;
+        
         function Pane(options) {
             var amlPane, queue, cancelEditorCreate, isFixedHeight;
             
@@ -162,6 +165,8 @@ define(function(require, module, exports) {
                     setTimeout(function(){
                         amlPane.$buttons.appendChild(btnPlus.$ext);
                         amlPane.$buttons.appendChild(btnMenu.$ext);
+                        
+                        addCustomTooltipHandler(amlPane.$buttons);
                     });
                 });
                 
@@ -198,6 +203,44 @@ define(function(require, module, exports) {
             
             /***** Methods *****/
             
+            function addCustomTooltipHandler(el) {
+                el.addEventListener("mousemove", function(e) {
+                    var target = e.target;
+                    var amlTab = apf.findHost(target); 
+                    var tab = amlTab && amlTab.cloud9tab;
+                    if (!tab) return tooltip && tooltip.hide();
+                    
+                    var tooltipTitle = tab.tooltip || tab.title;
+                    
+                    if (!tooltipTitle) return tooltip && tooltip.hide();
+                    
+                    if (!tooltip)
+                        tooltip = new Tooltip(document.body);
+                    
+                    var rect = tab.aml.$button.getBoundingClientRect();
+                    var style = tooltip.getElement().style;
+                    style.top = rect.bottom + 10 + "px";
+                    style.textAlign = "center";
+                    
+                    tooltip.setText(tooltipTitle);
+                    tooltip.show();
+                    var tooltipRect = tooltip.getElement().getBoundingClientRect();
+                    style.minWidth = rect.width + "px";
+                    var left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    if (left + tooltipRect.width > window.innerWidth)
+                        left = Math.max(0, window.innerWidth - tooltipRect.width);
+                    style.left = left + "px";
+                });
+                
+                el.addEventListener("mouseout", function(e) {
+                    tooltip && tooltip.hide();
+                });
+                plugin.on("beforeUnload", function() {
+                    tooltip && tooltip.destroy();
+                    tooltip = null;
+                });
+            }
+            
             function createEditor(type, callback) {
                 var tab = amlPane.getPage("editor::" + type);
                 if (cancelEditorCreate)

plugins/c9.ide.editors/tab.js

@@ -76,7 +76,6 @@ define(function(require, module, exports) {
                     id: plugin.name, // path || 
                     type: "editor::" + editorType,
                     autofocus: false,
-                    tooltip: tooltip,
                     caption: title,
                     tab: plugin,
                     focussable: true,
@@ -420,7 +419,6 @@ define(function(require, module, exports) {
                 },
                 set tooltip(value) { 
                     tooltip = value;
-                    amlTab && amlTab.setProperty("tooltip", value);
                 },
                 /**
                  * The background color of the tab button and it's body. It is