4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 * @class Roo.QuickTips
13 * Provides attractive and customizable tooltips for any element.
16 Roo.QuickTips = function(){
17 var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
19 var visible = false, disabled = true, inited = false;
20 var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
22 var onOver = function(e){
26 var t = e.getTarget();
27 if(!t || t.nodeType !== 1 || t == document || t == document.body){
31 clearTimeout(hideProc);
34 if(t && tagEls[t.id]){
36 showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
39 var ttp, et = Roo.fly(t);
40 var ns = cfg.namespace;
41 if(tm.interceptTitles && t.title){
44 t.removeAttribute("title");
47 ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute);
50 showProc = show.defer(tm.showDelay, tm, [{
53 width: et.getAttributeNS(ns, cfg.width),
54 autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
55 title: et.getAttributeNS(ns, cfg.title),
56 cls: et.getAttributeNS(ns, cfg.cls)
61 var onOut = function(e){
62 clearTimeout(showProc);
63 var t = e.getTarget();
64 if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
65 hideProc = setTimeout(hide, tm.hideDelay);
69 var onMove = function(e){
75 if(tm.trackMouse && ce){
80 var onDown = function(e){
81 clearTimeout(showProc);
82 clearTimeout(hideProc);
87 tm.enable.defer(100, tm);
92 var getPad = function(){
93 return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
96 var show = function(o){
100 clearTimeout(dismissProc);
102 if(removeCls){ // in case manually hidden
103 el.removeClass(removeCls);
111 tipTitle.update(ce.title);
117 el.dom.style.width = tm.maxWidth+'px';
118 //tipBody.dom.style.width = '';
119 tipBodyText.update(o.text);
120 var p = getPad(), w = ce.width;
122 var td = tipBodyText.dom;
123 var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
124 if(aw > tm.maxWidth){
126 }else if(aw < tm.minWidth){
132 //tipBody.setWidth(w);
133 el.setWidth(parseInt(w, 10) + p);
134 if(ce.autoHide === false){
135 close.setDisplayed(true);
140 close.setDisplayed(false);
146 el.avoidY = xy[1]-18;
151 el.setStyle("visibility", "visible");
152 el.fadeIn({callback: afterShow});
158 var afterShow = function(){
162 if(tm.autoDismiss && ce.autoHide !== false){
163 dismissProc = setTimeout(hide, tm.autoDismissDelay);
168 var hide = function(noanim){
169 clearTimeout(dismissProc);
170 clearTimeout(hideProc);
174 if(noanim !== true && tm.animate){
175 el.fadeOut({callback: afterHide});
182 var afterHide = function(){
185 el.removeClass(removeCls);
192 * @cfg {Number} minWidth
193 * The minimum width of the quick tip (defaults to 40)
197 * @cfg {Number} maxWidth
198 * The maximum width of the quick tip (defaults to 300)
202 * @cfg {Boolean} interceptTitles
203 * True to automatically use the element's DOM title value if available (defaults to false)
205 interceptTitles : false,
207 * @cfg {Boolean} trackMouse
208 * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
212 * @cfg {Boolean} hideOnClick
213 * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
217 * @cfg {Number} showDelay
218 * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
222 * @cfg {Number} hideDelay
223 * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
227 * @cfg {Boolean} autoHide
228 * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
229 * Used in conjunction with hideDelay.
234 * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
235 * (defaults to true). Used in conjunction with autoDismissDelay.
240 * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
242 autoDismissDelay : 5000,
244 * @cfg {Boolean} animate
245 * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
250 * @cfg {String} title
251 * Title text to display (defaults to ''). This can be any valid HTML markup.
255 * Body text to display (defaults to ''). This can be any valid HTML markup.
259 * A CSS class to apply to the base quick tip element (defaults to '').
262 * @cfg {Number} width
263 * Width in pixels of the quick tip (defaults to auto). Width will be ignored if it exceeds the bounds of
264 * minWidth or maxWidth.
268 * Initialize and enable QuickTips for first use. This should be called once before the first attempt to access
269 * or display QuickTips in a page.
275 if(!Roo.isReady){ // allow calling of init() before onReady
276 Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
279 el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
280 el.fxDefaults = {stopFx: true};
281 // maximum custom styling
282 //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
283 el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');
284 tipTitle = el.child('h3');
285 tipTitle.enableDisplayMode("block");
286 tipBody = el.child('div.x-tip-bd');
287 tipBodyText = el.child('div.x-tip-bd-inner');
288 //bdLeft = el.child('div.x-tip-bd-left');
289 //bdRight = el.child('div.x-tip-bd-right');
290 close = el.child('div.x-tip-close');
291 close.enableDisplayMode("block");
292 close.on("click", hide);
293 var d = Roo.get(document);
294 d.on("mousedown", onDown);
295 d.on("mouseover", onOver);
296 d.on("mouseout", onOut);
297 d.on("mousemove", onMove);
298 esc = d.addKeyListener(27, hide);
301 dd = el.initDD("default", null, {
306 dd.setHandleElId(tipTitle.id);
315 * Configures a new quick tip instance and assigns it to a target element. The following config options
318 Property Type Description
319 ---------- --------------------- ------------------------------------------------------------------------
320 target Element/String/Array An Element, id or array of ids that this quick tip should be tied to
322 * @param {Object} config The config object
324 register : function(config){
325 var cs = config instanceof Array ? config : arguments;
326 for(var i = 0, len = cs.length; i < len; i++) {
328 var target = c.target;
330 if(target instanceof Array){
331 for(var j = 0, jlen = target.length; j < jlen; j++){
332 tagEls[target[j]] = c;
335 tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
342 * Removes this quick tip from its element and destroys it.
343 * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
345 unregister : function(el){
346 delete tagEls[Roo.id(el)];
350 * Enable this quick tip.
353 if(inited && disabled){
355 if(locks.length < 1){
362 * Disable this quick tip.
364 disable : function(){
366 clearTimeout(showProc);
367 clearTimeout(hideProc);
368 clearTimeout(dismissProc);
376 * Returns true if the quick tip is enabled, else false.
378 isEnabled : function(){
396 Roo.QuickTips.tips = Roo.QuickTips.register;