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