TextField ToolTip : Popup ToolTip « Ajax Layer « JavaScript DHTML






TextField ToolTip

<HTML>
<HEAD>
<TITLE>jaxWidgets by Sarat Pediredla</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
.testClass {
BODY {
  FONT-SIZE: 0.9em; FONT-FAMILY: Arial, serif
}
A {
  TEXT-DECORATION: none
}
CODE {
  CLEAR: both; DISPLAY: block; FONT-SIZE: 0.9em; FONT-FAMILY: "Courier New", arial, serif; BACKGROUND-COLOR: #00ffcc
}
highlight {
  BACKGROUND-COLOR: #ffff99
}
.header {
  PADDING-RIGHT: 15px; PADDING-LEFT: 10px; FONT-WEIGHT: normal; FONT-SIZE: 2.5em; PADDING-BOTTOM: 15px; MARGIN: 0px; PADDING-TOP: 1px; LETTER-SPACING: -0.05em
}
.header SPAN {
  FONT-SIZE: 0.5em; FONT-FAMILY: Arial, serif; LETTER-SPACING: 0px
}
.toolheader {
  MARGIN: 5px 10px; COLOR: #000000; BORDER-BOTTOM: #69c 2px solid; FONT-FAMILY: arial, serif
}
.layer {
  CLEAR: both; BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 1em; BACKGROUND: #fff; PADDING-BOTTOM: 0.5em; MARGIN: 15px 5%; OVERFLOW: auto; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #ccc 1px solid
}
.input {
  BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; OVERFLOW: auto; BORDER-LEFT: #ff0000 1px solid; BORDER-BOTTOM: #ff0000 1px solid
}
.button {
  BORDER-RIGHT: #cccccc 1px ridge; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px ridge; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px ridge; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px ridge; FONT-FAMILY: serif
}
.note {
  FONT-SIZE: 0.8em
}
.testClass {
  CLEAR: left; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: red; FONT-FAMILY: Arial, Helvetica, sans-serif
}

  FONT-WEIGHT: bold; COLOR: #ff0000
}
</STYLE>

<SCRIPT type="text/javascript" language=javascript">
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_RuntimeEngine.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The Runtime Engine to register and process widgets
=========================================

============= FEATURES ==================
- Dynamically loads and parses jaxWidgets
- i18n support for strings
============================================

============= FUTURE PLANS ==================

==============================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/
// Define namespace
if (typeof jaxWidgets != "object") { var jaxWidgets = {}; }

// Register namespace and object
jaxWidgets.RuntimeEngine = function()
{
  var registeredWidgets = new Array();
  var totalWidgets = -1;
  var loadedWidgets = new Array();
  var currentWidgets = new Array();
  
  this.registerWidget = function(tag, handler)
  {
    var newWidget = new Array(tag, handler);
    registeredWidgets[++totalWidgets] = newWidget;
  };
  
  this.loadEngine = function()
  {
    // Load library component
    _Library = new jaxWidgets.Library();        
    for(var i=0; i <= totalWidgets; i++)
    {
      currentWidgets = document.getElementsByTagName("jax:"+registeredWidgets[i][0]);
      for(var j =0; j < currentWidgets.length; j++)
      {
        registeredWidgets[i][1].load(currentWidgets[j]);
      }
      
      _Library.cleanup(currentWidgets);
    }    
  };
  
  /*
  Debug function for testing purposes only 
  You NEED to create a div with id=debug in your page for this to work
  */
  this.writeDebug = function(string)
  {
    document.getElementById("debug").innerHTML += string + "<br>";
  };
  
  /*
  Error Log function. Can be disabled through setErrors(false)
  */
  this.writeError = function(string)
  {
    if(document.getElementById("jaxErrorLogDiv"))
    {
      document.getElementById("jaxErrorLogDiv").innerHTML += string + "<br>";
    }
    else
    {
      var logDiv = document.createElement("div");
      logDiv.setAttribute("id","jaxErrorLogDiv");
      logDiv.style.color = "red";
      logDiv.style.fontSize = "0.9em";
      logDiv.style.fontWeight = "bold";
      var bodyTag = document.getElementsByTagName("body")[0];
      bodyTag.insertBefore(logDiv,bodyTag.firstChild);
      logDiv.innerHTML = "jax Error : ";
      logDiv.innerHTML += string + "<br>";
    }
  };
      
}

// Register event handlers
// Use quirksmode idea for flexible registration by copying existing events
// onKeyUp
/******* Define GLOBAL Constants *********/
var _Engine;              // The jax Runtime Engine
var _Library;             // The jax Runtime library

_Engine = new jaxWidgets.RuntimeEngine();
var oldEventCode = (window.onload) ? elm.onload : function () {};
window.onload = function () {oldEventCode(); _Engine.loadEngine();};

</SCRIPT>
<!-- jaxWidgets_Library.js -->
<SCRIPT language=javascript type="text/javascript" >
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_Library.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The Library is a repository for common functions used by jaxWidgets
=========================================

============= FEATURES ==================
- Sets Style of elements
============================================

============= CHANGELOG ==================
17 June 2005 [17:46] [Sarat Pediredla]
- Modified code to replace getAttribute().toLowerCase() with tmpString
  because strangely IE 6.0 wont support it.
18 June 2005 [08:45] [Sarat Pediredla]
- Added functions to get X & Y position of elements.
- Modified style setters to use element.style.cssText
==========================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/

// The following array IS NEEDED for widgets wishing to lock submitting forms
var submitLockedBy = new Array();

// Register object
jaxWidgets.Library = function()
{
  // Cleanup function to remove jax XML tags
  this.cleanup = function(array)
  {
    var arraylength = array.length;
    for(var i=0; i < arraylength; i++)
    {
      var element = array[0];
      element.parentNode.removeChild(element);
    }
    return true;
  }
  
  // Gets the index of an element in an array
  this.getIndex = function(element,array)
  {
    for(var i=0; i < array.length; i++)
    {
      if(array[i] == element)
        return i;
    }
  }
  // Sets the CSS style from source to target element
  this.setStyle = function(sourceElement,targetElement)
  {
    if(sourceElement.getAttribute("style") && sourceElement.getAttribute("style").length > 0)
    {
      targetElement.style.cssText = sourceElement.getAttribute("style");
      return;
    }
    if(sourceElement.getAttribute("class") && sourceElement.getAttribute("class").length > 0)    
    {      
      targetElement.setAttribute("className",sourceElement.getAttribute("class"));
      targetElement.setAttribute("class",sourceElement.getAttribute("class"));
      return;
    }
  }
  
  // Returns parent form of a given element
  this.getParentForm = function(element)
  {
    for(var i=0;i < document.forms.length; i++)
    {
      if(document.forms[i][element.id] == element)
        return document.forms[i];
    }
    _Engine.writeError("jax Error : Your elements are not embedded inside a form");
    return null;
  }
  
  // Returns the submit button for a given form
  this.getSubmitElement = function(currentForm)
  {
    for(i=0;i<currentForm.length;i++)
    {
      var currentElement = currentForm.elements[i];
      var tmpString = currentElement.type;
      if(tmpString.toString().toLowerCase() == "submit")
        return currentElement;
    }
  }
  
  // Disables submitting of forms when fields not validated
  this.disableSubmit = function(element)
  {    
    form = this.getParentForm(element);
    var btnSubmit = this.getSubmitElement(form);    
    if(btnSubmit)
      btnSubmit.disabled = true;
  }
  
  this.enableSubmit = function(element)
  {    
    form = this.getParentForm(element);
    var btnSubmit = this.getSubmitElement(form);
    if(btnSubmit)
      btnSubmit.disabled = false;
  }
  
  this.lockSubmit = function(id)
  {
    var index = _Library.getIndex(id,submitLockedBy)
    if(!(index >= 0))
    {
      submitLockedBy.push(id);    
    }  
    _Library.disableSubmit(document.getElementById(id));
  }
  
  this.unlockSubmit = function(id)
  {
    var index = _Library.getIndex(id, submitLockedBy);
    if(index > -1)
    {
      submitLockedBy.pop(index);
      if(_Library.noSubmitLocks())
        _Library.enableSubmit(document.getElementById(id));
    }
  }
    
  this.noSubmitLocks = function()
  {
    if(submitLockedBy.length <= 0)
      return true;
    return false;
  }
  
  this.getXPos = function(element)
  {
      xPos = element.offsetLeft;
      tempEl = element.offsetParent;
        while (tempEl != null) 
      {
        xPos += (tempEl.offsetLeft);
          tempEl = tempEl.offsetParent;
        }
      return xPos;
  }
  
  this.getYPos = function(element)
  {    
      yPos = element.offsetTop;
      tempEl = element.offsetParent;
        while (tempEl != null) 
      {
        yPos += tempEl.offsetTop;
          tempEl = tempEl.offsetParent;
        }
      return yPos;    
  }
          
}
  
</SCRIPT>

<!-- jaxWidgets_FormTip.js -->
<SCRIPT language=javascript type="text/javascript">
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_FormTip.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 18/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The Form Tip is a component of jaxWidgets library.
It displays an interactive form tip on form elements for users
=========================================

============= FEATURES ==================
- Uses jaxXML markup tags to specify designer friendly tags in HTML (.NET style)
- i18n support for strings
- Customisable UI
============================================

============= CHANGELOG ==================

==========================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/

// Register object
jaxWidgets.FormTip = function()
{
  // i18n settings
  strText = "This is the default tip";
  
  // UI settings
  defaultStyle = "border: 1px solid black; padding: 1px; position: absolute; cursor: default; background-color: #FFFFCC; font-family: arial,helvetica; font-size: 0.75em; display: block; z-index: 10000; height: 14px;";
  
  // Create the element
  this.load = function(element)
  {
    if(!element)
    {
      _Engine.writeError('jax Error: Form Tip cannot load');
      return;
    }
        
    var formElement = document.getElementById(element.getAttribute("Target"));
    if(!formElement)
    {
      _Engine.writeError('jax Error: Form Tip is missing a Target attribute');
      return;
    }    
    
    var tipElement = document.createElement("div");
    tipElement.setAttribute("id",formElement.id+"_frmtip");  
    element.parentNode.insertBefore(tipElement, element);
            
    // Standard function to parse custom tag
    this.parseTag(element, tipElement);
    
    // Set inner text 
    tipElement.innerHTML = "<nowrap>"+tipElement.getAttribute("strText")+"</nowrap>";
    
    // Create style for current element using DOM compatible function from Library
    tipElement.style.cssText = defaultStyle;
    _Library.setStyle(element, tipElement);
    
    // Position tip & perform standard formatting
    tipElement.style.left = parseInt(_Library.getXPos(formElement))+"px";
    tipElement.style.top = parseInt(_Library.getYPos(formElement) + formElement.offsetHeight)+"px";
    tipElement.style.visibility = "hidden";
    tipElement.style.position = "absolute";
    tipElement.style.display = "block";
    tipElement.style.zIndex = "10000";
    // Small IE fix
    
    // Register event handlers
    // Use quirksmode idea for flexible registration by copying existing events
    // onfocus
    var oldEventCode = (formElement.onfocus) ? formElement.onfocus : function () {};
    formElement.onfocus = function () {oldEventCode(); _FormTip.show(formElement.id)};  
    
    // onblue
    var oldEventCode = (formElement.onblur) ? formElement.onblur : function () {};
    formElement.onblur = function () {oldEventCode(); _FormTip.hide(formElement.id)};  
  }
  
  this.parseTag = function(element, tipElement)
  {
    if(element.getAttribute("Text"))
      tipElement.setAttribute("strText",element.getAttribute("Text"));
    else
      tipElement.setAttribute("strText",strText);
  }
  
  this.show = function(id)
  {
    var tipElement = document.getElementById(id+"_frmtip");
    tipElement.style.visibility = "visible";
  }
  
  this.hide = function(id)
  {
    var tipElement = document.getElementById(id+"_frmtip");
    tipElement.style.visibility = "hidden";
  }
  
  this.registerWithEngine = function(_FormTip)
  {
    var tag = "FormTip";
    var handler = _FormTip;
    _Engine.registerWidget(tag, handler);
  }
}

var _FormTip = new jaxWidgets.FormTip();
_FormTip.registerWithEngine(_FormTip);
</SCRIPT>
<BODY>
 <H2>Demo </H2>
 <FORM id=testForm>This is a field with default tip<BR>
   <INPUT id=test1><BR><BR>This is a field with custom tip <BR>
   <INPUT id=test2><BR><BR>
       <JAX:FORMTIP Target="test1"></JAX:FORMTIP>
       <JAX:FORMTIP class=testClass Target="test2" Text="Mysterious field? Enter your age"></JAX:FORMTIP>
 </FORM>
 
</BODY></HTML>


           
       








Related examples in the same category

1.Tooltip with caption
2.With caption 2
3.Plain popup
4.With simple caption
5.STICKY tooltips
6.Insert HTML code into the tooltip text
7.overLIB: other side of the mouse
8.overLIB: snapping to a grid
9.overLIB: fixating the position
10.overLIB: all the features
11.overLIB - link
12.[DOM Tooltip] Example 1: Native Tooltips
13.[DOM Tooltip] Example 2: Basic Features
14.[DOM Tooltip] Example 3: Styled Tooltips (overlib style)
15.[DOM Tooltip] Example 3: Styled Tooltips (overlib style with caption)
16.[DOM Tooltip] Example 3: Styled Tooltips (nicetitles style)
17.[DOM Tooltip] Example 4: Behavior Options (Click to stick)
18.[DOM Tooltip] Example 4: Behavior Options (Custom close link)
19.[DOM Tooltip] Example 4: Behavior Options for a text field
20.[DOM Tooltip] Example 5: Advanced Features (Snap to grid)
21.[DOM Tooltip] Example 5: Advanced Features (Tooltip fading in)
22.[DOM Tooltip] Example 5: Advanced Features (Lazy trailing)
23.[DOM Tooltip] Example 5: Advanced Features (One tooltip only)
24.[DOM Tooltip] Example 6: XHTML Content(display an image inside a window)
25.[DOM Tooltip] Example 6: XHTML Content with image
26.[DOM Tooltip] Example 6: XHTML Content(Open an Inline window)
27.[DOM Tooltip] Example 6: XHTML Content
28.[DOM Tooltip] Example 7: Object Detection (DOM Tooltip can hunt down and hide these elements that cannot be overlapped)
29.[DOM Tooltip] Example 8: Custom Context Menu
30.[DOM Tooltip] Example 10: Onload PopIn
31.[DOM Tooltip] Example 13: Nested Tooltips
32.[DOM Tooltip] Example 14: Positioning
33.[DOM Tooltip] Example 9: Auto-Generated Tips (black background)
34.[DOM Tooltip] Example 9: Auto-Generated Tips with URL
35.[DOM Tooltip] Example 9: Auto-Generated Tips(a long paragraph)
36.Custom tooltip style