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) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
50 showProc = show.defer(tm.showDelay, tm, [{
52 text: ttp.replace(/\\n/g,'<br/>'),
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.
256 * Body text to display (defaults to ''). This can be any valid HTML markup.
261 * A CSS class to apply to the base quick tip element (defaults to '').
265 * @cfg {Number} width
266 * Width in pixels of the quick tip (defaults to auto). Width will be ignored if it exceeds the bounds of
267 * minWidth or maxWidth.
272 * Initialize and enable QuickTips for first use. This should be called once before the first attempt to access
273 * or display QuickTips in a page.
279 if(!Roo.isReady){ // allow calling of init() before onReady
280 Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
283 el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
284 el.fxDefaults = {stopFx: true};
285 // maximum custom styling
286 //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>');
287 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>');
288 tipTitle = el.child('h3');
289 tipTitle.enableDisplayMode("block");
290 tipBody = el.child('div.x-tip-bd');
291 tipBodyText = el.child('div.x-tip-bd-inner');
292 //bdLeft = el.child('div.x-tip-bd-left');
293 //bdRight = el.child('div.x-tip-bd-right');
294 close = el.child('div.x-tip-close');
295 close.enableDisplayMode("block");
296 close.on("click", hide);
297 var d = Roo.get(document);
298 d.on("mousedown", onDown);
299 d.on("mouseover", onOver);
300 d.on("mouseout", onOut);
301 d.on("mousemove", onMove);
302 esc = d.addKeyListener(27, hide);
305 dd = el.initDD("default", null, {
310 dd.setHandleElId(tipTitle.id);
319 * Configures a new quick tip instance and assigns it to a target element. The following config options
322 Property Type Description
323 ---------- --------------------- ------------------------------------------------------------------------
324 target Element/String/Array An Element, id or array of ids that this quick tip should be tied to
326 * @param {Object} config The config object
328 register : function(config){
329 var cs = config instanceof Array ? config : arguments;
330 for(var i = 0, len = cs.length; i < len; i++) {
332 var target = c.target;
334 if(target instanceof Array){
335 for(var j = 0, jlen = target.length; j < jlen; j++){
336 tagEls[target[j]] = c;
339 tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
346 * Removes this quick tip from its element and destroys it.
347 * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
349 unregister : function(el){
350 delete tagEls[Roo.id(el)];
354 * Enable this quick tip.
357 if(inited && disabled){
359 if(locks.length < 1){
366 * Disable this quick tip.
368 disable : function(){
370 clearTimeout(showProc);
371 clearTimeout(hideProc);
372 clearTimeout(dismissProc);
380 * Returns true if the quick tip is enabled, else false.
382 isEnabled : function(){
388 namespace : "roo", // was ext?? this may break..
389 alt_namespace : "ext",
401 Roo.QuickTips.tips = Roo.QuickTips.register;