1 /************************************************************************************************************
4 (C) www.dhtmlgoodies.com, September 2006
6 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
9 Look at the terms of use at http://www.dhtmlgoodies.com/index.html?page=termsOfUse
16 ************************************************************************************************************/
18 var DHTMLgoodies_globalTooltipObj;
24 function DHTMLgoodies_formTooltip()
28 var tooltipContentDiv; // Reference to inner div with tooltip content
29 var imagePath; // Relative path to images
30 var arrowImageFile; // Name of arrow image
31 var arrowImageFileRight; // Name of arrow image
34 var tooltipWidth; // Width of tooltip
35 var roundedCornerObj; // Reference to object of class DHTMLgoodies_roundedCorners
37 var closeMessage; // Close message
38 var activeInput; // Reference to currently active input
39 var tooltipPosition; // Tooltip position, possible values: "below" or "right"
40 var tooltipCornerSize; // Size of rounded corners
41 var displayArrow; // Display arrow above or at the left of the tooltip?
42 var cookieName; // Name of cookie
43 var disableTooltipPossibility; // Possibility of disabling tooltip
44 var disableTooltipByCookie; // If tooltip has been disabled, save the settings in cookie, i.e. for other pages with the same cookie name.
45 var disableTooltipMessage;
49 var pageBgColor; // Color of background - used in ie when applying iframe which covers select boxes
50 var currentTooltipObj; // Reference to form field which tooltip is currently showing for
52 this.currentTooltipObj = false,
53 this.tooltipDiv = false,
54 this.tooltipText = false;
55 this.imagePath = 'static/fusion/raptor/images/';
56 this.arrowImageFile = 'green-arrow.gif';
57 this.arrowImageFileRight = 'green-arrow-right.gif';
58 this.tooltipWidth = 200;
59 this.tooltipBgColor = '#317082';
60 this.closeMessage = 'Close';
61 this.disableTooltipMessage = 'Don\'t show this message again';
62 this.activeInput = false;
63 this.tooltipPosition = 'right';
64 this.arrowRightWidth = 16; // Default width of arrow when the tooltip is on the right side of the inputs.
65 this.arrowTopHeight = 13; // Default height of arrow at the top of tooltip
66 this.tooltipCornerSize = 10;
67 this.displayArrow = true;
68 this.cookieName = 'DHTMLgoodies_tooltipVisibility';
69 this.disableTooltipByCookie = false;
70 this.tooltipDisabled = false;
71 this.disableTooltipPossibility = true;
72 this.tooltipIframeObj = false;
73 this.pageBgColor = '#FFFFFF';
75 DHTMLgoodies_globalTooltipObj = this;
77 if(navigator.userAgent.indexOf('MSIE')>=0)this.isMSIE = true; else this.isMSIE = false;
81 DHTMLgoodies_formTooltip.prototype = {
82 // {{{ initFormFieldTooltip()
86 * Initializes the tooltip script. Most set methods needs to be executed before you call this method.
90 initFormFieldTooltip : function()
92 var formElements = new Array();
93 var inputs = document.getElementsByTagName('IMG');
94 for(var no=0;no<inputs.length;no++){
95 var attr = inputs[no].getAttribute('tooltipText');
96 if(!attr)attr = inputs[no].tooltipText;
97 if(attr)formElements[formElements.length] = inputs[no];
100 var inputs = document.getElementsByTagName('INPUT');
101 for(var no=0;no<inputs.length;no++){
102 var attr = inputs[no].getAttribute('tooltipText');
103 if(!attr)attr = inputs[no].tooltipText;
104 if(attr)formElements[formElements.length] = inputs[no];
107 var inputs = document.getElementsByTagName('TEXTAREA');
108 for(var no=0;no<inputs.length;no++){
109 var attr = inputs[no].getAttribute('tooltipText');
110 if(!attr)attr = inputs[no].tooltipText;
111 if(attr)formElements[formElements.length] = inputs[no];
113 var inputs = document.getElementsByTagName('SELECT');
114 for(var no=0;no<inputs.length;no++){
115 var attr = inputs[no].getAttribute('tooltipText');
116 if(!attr)attr = inputs[no].tooltipText;
117 if(attr)formElements[formElements.length] = inputs[no];
120 window.refToFormTooltip = this;
122 for(var no=0;no<formElements.length;no++){
123 formElements[no].onfocus = this.__displayTooltip;
125 this.addEvent(window,'resize',function(){ window.refToFormTooltip.__positionCurrentToolTipObj(); });
127 this.addEvent(document.documentElement,'click',function(e){ window.refToFormTooltip.__autoHideTooltip(e); });
132 // {{{ setTooltipPosition()
136 * Specify position of tooltip(below or right)
137 * @param String newPosition (Possible values: "below" or "right")
141 setTooltipPosition : function(newPosition)
143 this.tooltipPosition = newPosition;
147 // {{{ setCloseMessage()
151 * Specify "Close" message
152 * @param String closeMessage
156 setCloseMessage : function(closeMessage)
158 this.closeMessage = closeMessage;
162 // {{{ setDisableTooltipMessage()
166 * Specify disable tooltip message at the bottom of the tooltip
167 * @param String disableTooltipMessage
171 setDisableTooltipMessage : function(disableTooltipMessage)
173 this.disableTooltipMessage = disableTooltipMessage;
177 // {{{ setTooltipDisablePossibility()
181 * Specify whether you want the disable link to appear or not.
182 * @param Boolean disableTooltipPossibility
186 setTooltipDisablePossibility : function(disableTooltipPossibility)
188 this.disableTooltipPossibility = disableTooltipPossibility;
192 // {{{ setCookieName()
196 * Specify name of cookie. Useful if you're using this script on several pages.
197 * @param String newCookieName
201 setCookieName : function(newCookieName)
203 this.cookieName = newCookieName;
207 // {{{ setTooltipWidth()
211 * Specify width of tooltip
212 * @param Int newWidth
216 setTooltipWidth : function(newWidth)
218 this.tooltipWidth = newWidth;
223 // {{{ setArrowVisibility()
227 * Display arrow at the top or at the left of the tooltip?
228 * @param Boolean displayArrow
233 setArrowVisibility : function(displayArrow)
235 this.displayArrow = displayArrow;
240 // {{{ setTooltipBgColor()
244 * Send true to this method if you want to be able to save tooltip visibility in cookie. If it's set to true,
245 * It means that when someone returns to the page, the tooltips won't show.
247 * @param Boolean disableTooltipByCookie
251 setDisableTooltipByCookie : function(disableTooltipByCookie)
253 this.disableTooltipByCookie = disableTooltipByCookie;
257 // {{{ setTooltipBgColor()
261 * This method specifies background color of tooltip
262 * @param String newBgColor
266 setTooltipBgColor : function(newBgColor)
268 this.tooltipBgColor = newBgColor;
273 // {{{ setTooltipCornerSize()
277 * Size of rounded corners around tooltip
278 * @param Int newSize (0 = no rounded corners)
282 setTooltipCornerSize : function(tooltipCornerSize)
284 this.tooltipCornerSize = tooltipCornerSize;
289 // {{{ setTopArrowHeight()
293 * Size height of arrow at the top of tooltip
294 * @param Int arrowTopHeight
298 setTopArrowHeight : function(arrowTopHeight)
300 this.arrowTopHeight = arrowTopHeight;
305 // {{{ setRightArrowWidth()
309 * Size width of arrow when the tooltip is on the right side of inputs
310 * @param Int arrowTopHeight
314 setRightArrowWidth : function(arrowRightWidth)
316 this.arrowRightWidth = arrowRightWidth;
321 // {{{ setPageBgColor()
325 * Specify background color of page.
326 * @param String pageBgColor
330 setPageBgColor : function(pageBgColor)
332 this.pageBgColor = pageBgColor;
337 // {{{ __hideTooltip()
341 * This method displays the tooltip
346 __displayTooltip : function()
348 if(DHTMLgoodies_globalTooltipObj.disableTooltipByCookie){
349 var cookieValue = DHTMLgoodies_globalTooltipObj.getCookie(DHTMLgoodies_globalTooltipObj.cookieName) + '';
350 if(cookieValue=='1')DHTMLgoodies_globalTooltipObj.tooltipDisabled = true;
353 if(DHTMLgoodies_globalTooltipObj.tooltipDisabled)return; // Tooltip disabled
354 var tooltipText = this.getAttribute('tooltipText');
355 DHTMLgoodies_globalTooltipObj.activeInput = this;
357 if(!tooltipText)tooltipText = this.tooltipText;
358 DHTMLgoodies_globalTooltipObj.tooltipText = tooltipText;
361 if(!DHTMLgoodies_globalTooltipObj.tooltipDiv)DHTMLgoodies_globalTooltipObj.__createTooltip();
363 DHTMLgoodies_globalTooltipObj.__positionTooltip(this);
368 DHTMLgoodies_globalTooltipObj.tooltipContentDiv.innerHTML = tooltipText;
369 DHTMLgoodies_globalTooltipObj.tooltipDiv.style.display='block';
371 if(DHTMLgoodies_globalTooltipObj.isMSIE){
372 if(DHTMLgoodies_globalTooltipObj.tooltipPosition == 'below'){
373 DHTMLgoodies_globalTooltipObj.tooltipIframeObj.style.height = (DHTMLgoodies_globalTooltipObj.tooltipDiv.clientHeight - DHTMLgoodies_globalTooltipObj.arrowTopHeight);
375 DHTMLgoodies_globalTooltipObj.tooltipIframeObj.style.height = (DHTMLgoodies_globalTooltipObj.tooltipDiv.clientHeight);
382 // {{{ __hideTooltip()
386 * This function hides the tooltip
391 __hideTooltip : function()
394 DHTMLgoodies_globalTooltipObj.tooltipDiv.style.display='none';
401 // {{{ getSrcElement()
405 * Return the source of an event.
410 getSrcElement : function(e)
413 if (e.target) el = e.target;
414 else if (e.srcElement) el = e.srcElement;
415 if (el.nodeType == 3) // defeat Safari bug
421 __autoHideTooltip : function(e)
423 if(document.all)e = event;
424 var src = this.getSrcElement(e);
425 if(src.tagName.toLowerCase()!='input' && src.tagName.toLowerCase().toLowerCase()!='textarea' && src.tagName.toLowerCase().toLowerCase()!='select')this.__hideTooltip();
427 var attr = src.getAttribute('tooltipText');
428 if(!attr)attr = src.tooltipText;
430 this.__hideTooltip();
436 // {{{ __hideTooltipFromLink()
440 * This function hides the tooltip
445 __hideTooltipFromLink : function()
448 this.activeInput.focus();
449 window.refToThis = this;
450 setTimeout('window.refToThis.__hideTooltip()',10);
454 // {{{ disableTooltip()
458 * Hide tooltip and disable it
463 disableTooltip : function()
465 this.__hideTooltipFromLink();
466 if(this.disableTooltipByCookie)this.setCookie(this.cookieName,'1',500);
467 this.tooltipDisabled = true;
471 // {{{ __positionTooltip()
475 * This function creates the tooltip elements
480 __createTooltip : function()
482 this.tooltipDiv = document.createElement('DIV');
483 this.tooltipDiv.style.position = 'absolute';
485 if(this.displayArrow){
486 var topDiv = document.createElement('DIV');
488 if(this.tooltipPosition=='below'){
490 topDiv.style.marginLeft = '20px';
491 var arrowDiv = document.createElement('IMG');
492 arrowDiv.src = this.imagePath + this.arrowImageFile + '?rand='+ Math.random();
493 arrowDiv.style.display='block';
494 topDiv.appendChild(arrowDiv);
497 topDiv.style.marginTop = '5px';
498 var arrowDiv = document.createElement('IMG');
499 arrowDiv.src = this.imagePath + this.arrowImageFileRight + '?rand='+ Math.random();
500 arrowDiv.style.display='block';
501 topDiv.appendChild(arrowDiv);
502 topDiv.style.position = 'absolute';
505 this.tooltipDiv.appendChild(topDiv);
508 var outerDiv = document.createElement('DIV');
509 outerDiv.style.position = 'relative';
510 outerDiv.style.zIndex = 1000;
511 if(this.tooltipPosition!='below' && this.displayArrow){
512 outerDiv.style.left = this.arrowRightWidth + 'px';
515 outerDiv.id = 'DHTMLgoodies_formTooltipDiv';
516 outerDiv.className = 'DHTMLgoodies_formTooltipDiv';
517 outerDiv.style.backgroundColor = this.tooltipBgColor;
518 this.tooltipDiv.appendChild(outerDiv);
521 this.tooltipIframeObj = document.createElement('<IFRAME name="tooltipIframeObj" width="' + this.tooltipWidth + '" frameborder="no" src="about:blank"></IFRAME>');
522 this.tooltipIframeObj.style.position = 'absolute';
523 this.tooltipIframeObj.style.top = '0px';
524 this.tooltipIframeObj.style.left = '0px';
525 this.tooltipIframeObj.style.width = (this.tooltipWidth) + 'px';
526 this.tooltipIframeObj.style.zIndex = 100;
527 this.tooltipIframeObj.background = this.pageBgColor;
528 this.tooltipIframeObj.style.backgroundColor= this.pageBgColor;
529 this.tooltipDiv.appendChild(this.tooltipIframeObj);
530 if(this.tooltipPosition!='below' && this.displayArrow){
531 this.tooltipIframeObj.style.left = (this.arrowRightWidth) + 'px';
533 this.tooltipIframeObj.style.top = this.arrowTopHeight + 'px';
536 setTimeout("self.frames['tooltipIframeObj'].document.documentElement.style.backgroundColor='" + this.pageBgColor + "'",500);
540 this.tooltipContentDiv = document.createElement('DIV');
541 this.tooltipContentDiv.style.position = 'relative';
542 this.tooltipContentDiv.id = 'DHTMLgoodies_formTooltipContent';
543 outerDiv.appendChild(this.tooltipContentDiv);
545 var closeDiv = document.createElement('DIV');
546 closeDiv.style.textAlign = 'center';
548 closeDiv.innerHTML = '<A class="DHTMLgoodies_formTooltip_closeMessage" href="#" onclick="DHTMLgoodies_globalTooltipObj.__hideTooltipFromLink();return false">' + this.closeMessage + '</A>';
550 if(this.disableTooltipPossibility){
551 var tmpHTML = closeDiv.innerHTML;
552 tmpHTML = tmpHTML + ' | <A class="DHTMLgoodies_formTooltip_closeMessage" href="#" onclick="DHTMLgoodies_globalTooltipObj.disableTooltip();return false">' + this.disableTooltipMessage + '</A>';
553 closeDiv.innerHTML = tmpHTML;
556 outerDiv.appendChild(closeDiv);
558 document.body.appendChild(this.tooltipDiv);
562 if(this.tooltipCornerSize>0){
563 this.roundedCornerObj = new DHTMLgoodies_roundedCorners();
564 // (divId,xRadius,yRadius,color,backgroundColor,padding,heightOfContent,whichCorners)
565 this.roundedCornerObj.addTarget('DHTMLgoodies_formTooltipDiv',this.tooltipCornerSize,this.tooltipCornerSize,this.tooltipBgColor,this.pageBgColor,5);
566 this.roundedCornerObj.init();
570 this.tooltipContentDiv = document.getElementById('DHTMLgoodies_formTooltipContent');
574 addEvent : function(whichObject,eventType,functionName)
576 if(whichObject.attachEvent){
577 whichObject['e'+eventType+functionName] = functionName;
578 whichObject[eventType+functionName] = function(){whichObject['e'+eventType+functionName]( window.event );}
579 whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName] );
581 whichObject.addEventListener(eventType,functionName,false);
585 __positionCurrentToolTipObj : function()
587 if(DHTMLgoodies_globalTooltipObj.activeInput)this.__positionTooltip(DHTMLgoodies_globalTooltipObj.activeInput);
592 // {{{ __positionTooltip()
596 * This function positions the tooltip
598 * @param Obj inputObj = Reference to text input
602 __positionTooltip : function(inputObj)
605 if(!this.displayArrow)offset = 3;
606 if(this.tooltipPosition=='below'){
607 this.tooltipDiv.style.left = this.getLeftPos(inputObj)+ 'px';
608 this.tooltipDiv.style.top = (this.getTopPos(inputObj) + inputObj.offsetHeight + offset) + 'px';
611 this.tooltipDiv.style.left = (this.getLeftPos(inputObj) + inputObj.offsetWidth + offset)+ 'px';
612 this.tooltipDiv.style.top = this.getTopPos(inputObj) + 'px';
614 this.tooltipDiv.style.width=this.tooltipWidth + 'px';
620 * This method will return the top coordinate(pixel) of an object
622 * @param Object inputObj = Reference to HTML element
625 getTopPos : function(inputObj)
627 var returnValue = inputObj.offsetTop;
628 while((inputObj = inputObj.offsetParent) != null){
629 if(inputObj.tagName!='HTML'){
630 returnValue += inputObj.offsetTop;
631 if(document.all)returnValue+=inputObj.clientTop;
641 * This method will return the left coordinate(pixel) of an object
643 * @param Object inputObj = Reference to HTML element
646 getLeftPos : function(inputObj)
648 var returnValue = inputObj.offsetLeft;
649 while((inputObj = inputObj.offsetParent) != null){
650 if(inputObj.tagName!='HTML'){
651 returnValue += inputObj.offsetLeft;
652 if(document.all)returnValue+=inputObj.clientLeft;
663 * These cookie functions are downloaded from
664 * http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
666 * This function returns the value of a cookie
668 * @param String name = Name of cookie
669 * @param Object inputObj = Reference to HTML element
672 getCookie : function(name) {
673 var start = document.cookie.indexOf(name+"=");
674 var len = start+name.length+1;
675 if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
676 if (start == -1) return null;
677 var end = document.cookie.indexOf(";",len);
678 if (end == -1) end = document.cookie.length;
679 return unescape(document.cookie.substring(len,end));
687 * These cookie functions are downloaded from
688 * http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
690 * This function creates a cookie. (This method has been slighhtly modified)
692 * @param String name = Name of cookie
693 * @param String value = Value of cookie
694 * @param Int expires = Timestamp - days
695 * @param String path = Path for cookie (Usually left empty)
696 * @param String domain = Cookie domain
697 * @param Boolean secure = Secure cookie(SSL)
701 setCookie : function(name,value,expires,path,domain,secure) {
702 expires = expires * 60*60*24*1000;
703 var today = new Date();
704 var expires_date = new Date( today.getTime() + (expires) );
705 var cookieString = name + "=" +escape(value) +
706 ( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
707 ( (path) ? ";path=" + path : "") +
708 ( (domain) ? ";domain=" + domain : "") +
709 ( (secure) ? ";secure" : "");
710 document.cookie = cookieString;