X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FTooltip.js;h=33afec115f5f4cae4a8776fb1f5969207d79f422;hb=ae0bbc3ce0db16a90d8a9cc36f549693204203f7;hp=c44e4b84f2ec5ab283f0f743d1a9b9085d5d9d02;hpb=7817931759ac7126beccef32b3dad254944c70b1;p=roojs1 diff --git a/Roo/bootstrap/Tooltip.js b/Roo/bootstrap/Tooltip.js index c44e4b84f2..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, { @@ -65,10 +72,24 @@ Roo.apply(Roo.bootstrap.Tooltip, { this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding... } //Roo.log(ev); - var bindEl = el; + + 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 (!el.attr('tooltip')) { // + if (!pel && !el.attr('tooltip')) { // if (!el.select("[tooltip]").elements.length) { return; } @@ -82,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(); @@ -140,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' @@ -161,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 () { @@ -203,7 +231,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { }, delay); }, - show : function () + show : function (msg) { if (!this.el) { this.render(document.body); @@ -211,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) : @@ -241,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]); @@ -253,17 +282,43 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { 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); + } - align = Roo.bootstrap.Tooltip.alignment[placement]; + 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(placement); + this.el.addClass("bs-tooltip-"+ placement); - this.el.addClass('in fade'); + this.el.addClass('in fade show'); this.hoverState = null; @@ -271,6 +326,10 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { // fade it? } + + + + }, hide : function() { @@ -279,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(); }