git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_Tooltip.js.html

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