sort out zIndex and hunting for tooltips

[roojs1] / Roo / bootstrap / Tooltip.js

diff --git a/Roo/bootstrap/Tooltip.js b/Roo/bootstrap/Tooltip.js
index e3cedd3..33afec1 100644 (file)
--- a/Roo/bootstrap/Tooltip.js
+++ b/Roo/bootstrap/Tooltip.js
@@ -20,6 +20,13 @@
 
 Roo.bootstrap.Tooltip = function(config){
     Roo.bootstrap.Tooltip.superclass.constructor.call(this, config);
+    
+    this.alignment = Roo.bootstrap.Tooltip.alignment;
+    
+    if(typeof(config) != 'undefined' && typeof(config.alignment) != 'undefined'){
+        this.alignment = config.alignment;
+    }
+    
 };
 
 Roo.apply(Roo.bootstrap.Tooltip, {
@@ -61,17 +68,43 @@ Roo.apply(Roo.bootstrap.Tooltip, {
 
         }
         
-        
-        
         if (this.currentTip.el) {
-            this.currentTip.el.hide(); // force hiding...
+            this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding...
         }    
-        Roo.log(el);
-        if (!el.attr('tooltip') && !el.select("[tooltip]").elements.length) { // parents who have tip?
+        //Roo.log(ev);
+        
+        if(!el || el.dom == document){
             return;
         }
+        
+        var bindEl = el; 
+        var pel = false;
+        if (!el.attr('tooltip')) {
+            pel = el.findParent("[tooltip]");
+            if (pel) {
+                bindEl = Roo.get(pel);
+            }
+        }
+        
+       
+        
+        // you can not look for children, as if el is the body.. then everythign is the child..
+        if (!pel && !el.attr('tooltip')) { //
+            if (!el.select("[tooltip]").elements.length) {
+                return;
+            }
+            // is the mouse over this child...?
+            bindEl = el.select("[tooltip]").first();
+            var xy = ev.getXY();
+            if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
+                //Roo.log("not in region.");
+                return;
+            }
+            //Roo.log("child element over..");
+            
+        }
         this.currentEl = el;
-        this.currentTip.bind(el);
+        this.currentTip.bind(bindEl);
         this.currentRegion = Roo.lib.Region.getRegion(dom);
         this.currentTip.enter();
         
@@ -128,14 +161,16 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
     
     placement : 'bottom', 
     
+    alignment : false,
+    
     getAutoCreate : function(){
     
         var cfg = {
-           cls : 'tooltip',
+           cls : 'tooltip',   
            role : 'tooltip',
            cn : [
                 {
-                    cls : 'tooltip-arrow'
+                    cls : 'tooltip-arrow arrow'
                 },
                 {
                     cls : 'tooltip-inner'
@@ -149,7 +184,12 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
     {
         this.bindEl = el;
     },
-      
+    
+    initEvents : function()
+    {
+        this.arrowEl = this.el.select('.arrow', true).first();
+        this.innerEl = this.el.select('.tooltip-inner', true).first();
+    },
     
     enter : function () {
        
@@ -177,7 +217,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         this.hoverState = 'out';
          if (!this.delay || !this.delay.hide) {
             this.hide();
-            return 
+            return;
         }
        
         var _t = this;
@@ -188,10 +228,10 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
                 _t.hide();
                 Roo.bootstrap.Tooltip.currentEl = false;
             }
-        }, delay)
+        }, delay);
     },
     
-    show : function ()
+    show : function (msg)
     {
         if (!this.el) {
             this.render(document.body);
@@ -199,11 +239,12 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         // set content.
         //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
         
-        var tip = el.attr('tooltip') || el.select("[tooltip]").first().attr('tooltip');
+        var tip = msg || this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
         
-        this.el.select('.tooltip-inner',true).first().dom.innerHTML = top
+        this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
         
-        this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
+        this.el.removeClass(['fade','top','bottom', 'left', 'right','in',
+                             'bs-tooltip-top','bs-tooltip-bottom', 'bs-tooltip-left', 'bs-tooltip-right']);
         
         var placement = typeof this.placement == 'function' ?
             this.placement.call(this, this.el, on_el) :
@@ -219,7 +260,6 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         //this.el.setXY([0,0]);
         this.el.show();
         //this.el.dom.style.display='block';
-        this.el.addClass(placement);
         
         //this.el.appendTo(on_el);
         
@@ -229,18 +269,67 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         if (autoPlace) {
             // fixme..
         }
-        var align = Roo.bootstrap.Tooltip.alignment[placement];
+        
+        var align = this.alignment[placement];
+        
+        var xy = this.el.getAlignToXY(this.bindEl, align[0], align[1]);
+        
+        if(placement == 'top' || placement == 'bottom'){
+            if(xy[0] < 0){
+                placement = 'right';
+            }
+            
+            if(xy[0] + this.el.getWidth() > Roo.lib.Dom.getViewWidth()){
+                placement = 'left';
+            }
+            
+            var scroll = Roo.select('body', true).first().getScroll();
+            
+            if(xy[1] > Roo.lib.Dom.getViewHeight() + scroll.top - this.el.getHeight()){
+                placement = 'top';
+            }
+            
+            align = this.alignment[placement];
+            
+            this.arrowEl.setLeft((this.innerEl.getWidth()/2) - 5);
+            
+        }
+        
+        var elems = document.getElementsByTagName('div');
+        var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
+        for (var i = 0; i < elems.length; i++) {
+          var zindex = Number.parseInt(
+                document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
+                10
+          );
+          if (zindex > highest) {
+            highest = zindex;
+          }
+        }
+        
+        
+        
+        this.el.dom.style.zIndex = highest;
+        
         this.el.alignTo(this.bindEl, align[0],align[1]);
         //var arrow = this.el.select('.arrow',true).first();
         //arrow.set(align[2], 
         
-        this.el.addClass('in fade');
+        this.el.addClass(placement);
+        this.el.addClass("bs-tooltip-"+ placement);
+        
+        this.el.addClass('in fade show');
+        
         this.hoverState = null;
         
         if (this.el.hasClass('fade')) {
             // fade it?
         }
         
+        
+        
+        
+        
     },
     hide : function()
     {
@@ -249,7 +338,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
             return;
         }
         //this.el.setXY([0,0]);
-        this.el.removeClass('in');
+        this.el.removeClass(['show', 'in']);
         //this.el.hide();
         
     }