git.roojs.org Git - roojs1/blob - Roo/bootstrap/Tooltip.js

   1 /*
   2  * - LGPL
   3  *
   4  * Tooltip
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Tooltip
  10  * Bootstrap Tooltip class
  11  * This is basic at present - all componets support it by default, however they should add tooltipEl() method
  12  * to determine which dom element triggers the tooltip.
  13  *
  14  * It needs to add support for additional attributes like tooltip-position
  15  *
  16  * @constructor
  17  * Create a new Toolti
  18  * @param {Object} config The config object
  19  */
  20
  21 Roo.bootstrap.Tooltip = function(config){
  22     Roo.bootstrap.Tooltip.superclass.constructor.call(this, config);
  23 };
  24
  25 Roo.apply(Roo.bootstrap.Tooltip, {
  26     /**
  27      * @function init initialize tooltip monitoring.
  28      * @static
  29      */
  30     currentEl : false,
  31     currentTip : false,
  32     currentRegion : false,
  33
  34     //  init : delay?
  35
  36     init : function()
  37     {
  38         Roo.get(document).on('mouseover', this.enter ,this);
  39         Roo.get(document).on('mouseout', this.leave, this);
  40
  41
  42         this.currentTip = new Roo.bootstrap.Tooltip();
  43     },
  44
  45     enter : function(ev)
  46     {
  47         var dom = ev.getTarget();
  48
  49         //Roo.log(['enter',dom]);
  50         var el = Roo.fly(dom);
  51         if (this.currentEl) {
  52             //Roo.log(dom);
  53             //Roo.log(this.currentEl);
  54             //Roo.log(this.currentEl.contains(dom));
  55             if (this.currentEl == el) {
  56                 return;
  57             }
  58             if (dom != this.currentEl.dom && this.currentEl.contains(dom)) {
  59                 return;
  60             }
  61
  62         }
  63
  64         if (this.currentTip.el) {
  65             this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding...
  66         }
  67         //Roo.log(ev);
  68
  69         if(!el){
  70             return;
  71         }
  72
  73         var bindEl = el;
  74
  75         Roo.log(el.dom);
  76         // you can not look for children, as if el is the body.. then everythign is the child..
  77         if (!el.attr('tooltip')) { //
  78             if (!el.select("[tooltip]").elements.length) {
  79                 return;
  80             }
  81             // is the mouse over this child...?
  82             bindEl = el.select("[tooltip]").first();
  83             var xy = ev.getXY();
  84             if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
  85                 //Roo.log("not in region.");
  86                 return;
  87             }
  88             //Roo.log("child element over..");
  89
  90         }
  91         this.currentEl = bindEl;
  92         this.currentTip.bind(bindEl);
  93         this.currentRegion = Roo.lib.Region.getRegion(dom);
  94         this.currentTip.enter();
  95
  96     },
  97     leave : function(ev)
  98     {
  99         var dom = ev.getTarget();
 100         //Roo.log(['leave',dom]);
 101         if (!this.currentEl) {
 102             return;
 103         }
 104
 105
 106         if (dom != this.currentEl.dom) {
 107             return;
 108         }
 109         var xy = ev.getXY();
 110         if (this.currentRegion.contains( new Roo.lib.Region( xy[1], xy[0] ,xy[1], xy[0]  ))) {
 111             return;
 112         }
 113         // only activate leave if mouse cursor is outside... bounding box..
 114
 115
 116
 117
 118         if (this.currentTip) {
 119             this.currentTip.leave();
 120         }
 121         //Roo.log('clear currentEl');
 122         this.currentEl = false;
 123
 124
 125     },
 126     alignment : {
 127         'left' : ['r-l', [-2,0], 'right'],
 128         'right' : ['l-r', [2,0], 'left'],
 129         'bottom' : ['t-b', [0,2], 'top'],
 130         'top' : [ 'b-t', [0,-2], 'bottom']
 131     }
 132
 133 });
 134
 135
 136 Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
 137
 138
 139     bindEl : false,
 140
 141     delay : null, // can be { show : 300 , hide: 500}
 142
 143     timeout : null,
 144
 145     hoverState : null, //???
 146
 147     placement : 'bottom',
 148
 149     getAutoCreate : function(){
 150
 151         var cfg = {
 152            cls : 'tooltip',
 153            role : 'tooltip',
 154            cn : [
 155                 {
 156                     cls : 'tooltip-arrow'
 157                 },
 158                 {
 159                     cls : 'tooltip-inner'
 160                 }
 161            ]
 162         };
 163
 164         return cfg;
 165     },
 166     bind : function(el)
 167     {
 168         this.bindEl = el;
 169     },
 170
 171
 172     enter : function () {
 173
 174         if (this.timeout != null) {
 175             clearTimeout(this.timeout);
 176         }
 177
 178         this.hoverState = 'in';
 179          //Roo.log("enter - show");
 180         if (!this.delay || !this.delay.show) {
 181             this.show();
 182             return;
 183         }
 184         var _t = this;
 185         this.timeout = setTimeout(function () {
 186             if (_t.hoverState == 'in') {
 187                 _t.show();
 188             }
 189         }, this.delay.show);
 190     },
 191     leave : function()
 192     {
 193         clearTimeout(this.timeout);
 194
 195         this.hoverState = 'out';
 196          if (!this.delay || !this.delay.hide) {
 197             this.hide();
 198             return;
 199         }
 200
 201         var _t = this;
 202         this.timeout = setTimeout(function () {
 203             //Roo.log("leave - timeout");
 204
 205             if (_t.hoverState == 'out') {
 206                 _t.hide();
 207                 Roo.bootstrap.Tooltip.currentEl = false;
 208             }
 209         }, delay);
 210     },
 211
 212     show : function ()
 213     {
 214         if (!this.el) {
 215             this.render(document.body);
 216         }
 217         // set content.
 218         //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
 219
 220         var tip = this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
 221
 222         this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
 223
 224         this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
 225
 226         var placement = typeof this.placement == 'function' ?
 227             this.placement.call(this, this.el, on_el) :
 228             this.placement;
 229
 230         var autoToken = /\s?auto?\s?/i;
 231         var autoPlace = autoToken.test(placement);
 232         if (autoPlace) {
 233             placement = placement.replace(autoToken, '') || 'top';
 234         }
 235
 236         //this.el.detach()
 237         //this.el.setXY([0,0]);
 238         this.el.show();
 239         //this.el.dom.style.display='block';
 240
 241         //this.el.appendTo(on_el);
 242
 243         var p = this.getPosition();
 244         var box = this.el.getBox();
 245
 246         if (autoPlace) {
 247             // fixme..
 248         }
 249
 250         var align = Roo.bootstrap.Tooltip.alignment[placement];
 251
 252         var xy = this.el.getAlignToXY(this.bindEl, align[0], align[1]);
 253
 254         if(placement == 'top' || placement == 'bottom'){
 255             if(xy[0] < 0){
 256                 placement = 'right';
 257             }
 258
 259             if(xy[0] + this.el.getWidth() > Roo.lib.Dom.getViewWidth()){
 260                 placement = 'left';
 261             }
 262
 263             var scroll = Roo.select('body', true).first().getScroll();
 264
 265             if(xy[1] > Roo.lib.Dom.getViewHeight() + scroll.top - this.el.getHeight()){
 266                 placement = 'top';
 267             }
 268
 269         }
 270
 271         align = Roo.bootstrap.Tooltip.alignment[placement];
 272
 273         this.el.alignTo(this.bindEl, align[0],align[1]);
 274         //var arrow = this.el.select('.arrow',true).first();
 275         //arrow.set(align[2],
 276
 277         this.el.addClass(placement);
 278
 279         this.el.addClass('in fade');
 280
 281         this.hoverState = null;
 282
 283         if (this.el.hasClass('fade')) {
 284             // fade it?
 285         }
 286
 287     },
 288     hide : function()
 289     {
 290
 291         if (!this.el) {
 292             return;
 293         }
 294         //this.el.setXY([0,0]);
 295         this.el.removeClass('in');
 296         //this.el.hide();
 297
 298     }
 299
 300 });
 301
 302
 303