X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FTooltip.js;h=33afec115f5f4cae4a8776fb1f5969207d79f422;hb=ae0bbc3ce0db16a90d8a9cc36f549693204203f7;hp=8e39c4fca55177bb433de2ffa77f821199f2afd1;hpb=5ce8f08c15e4dc6dd03c97663ff177b29d709e5d;p=roojs1 diff --git a/Roo/bootstrap/Tooltip.js b/Roo/bootstrap/Tooltip.js index 8e39c4fca5..33afec115f 100644 --- 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, { @@ -48,11 +55,7 @@ Roo.apply(Roo.bootstrap.Tooltip, { //Roo.log(['enter',dom]); var el = Roo.fly(dom); - - Roo.debug && Roo.log(dom); - if (this.currentEl) { - //Roo.log(dom); //Roo.log(this.currentEl); //Roo.log(this.currentEl.contains(dom)); @@ -74,10 +77,19 @@ Roo.apply(Roo.bootstrap.Tooltip, { return; } - var bindEl = el; + 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 (!el.attr('tooltip')) { // + if (!pel && !el.attr('tooltip')) { // if (!el.select("[tooltip]").elements.length) { return; } @@ -91,7 +103,7 @@ Roo.apply(Roo.bootstrap.Tooltip, { //Roo.log("child element over.."); } - this.currentEl = bindEl; + this.currentEl = el; this.currentTip.bind(bindEl); this.currentRegion = Roo.lib.Region.getRegion(dom); this.currentTip.enter(); @@ -149,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' @@ -170,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 () { @@ -212,7 +231,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { }, delay); }, - show : function () + show : function (msg) { if (!this.el) { this.render(document.body); @@ -220,11 +239,12 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { // set content. //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]); - var tip = this.bindEl.attr('tooltip') || this.bindEl.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 = 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) : @@ -250,7 +270,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { // fixme.. } - var align = Roo.bootstrap.Tooltip.alignment[placement]; + var align = this.alignment[placement]; var xy = this.el.getAlignToXY(this.bindEl, align[0], align[1]); @@ -269,17 +289,36 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { 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; + } } - align = Roo.bootstrap.Tooltip.alignment[placement]; + + + 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(placement); + this.el.addClass("bs-tooltip-"+ placement); - this.el.addClass('in fade'); + this.el.addClass('in fade show'); this.hoverState = null; @@ -287,6 +326,10 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { // fade it? } + + + + }, hide : function() { @@ -295,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(); }