Showing posts with label JSP ToolTips using javascript. Show all posts
Showing posts with label JSP ToolTips using javascript. Show all posts

Monday, November 22, 2010

How to Create JSP ToolTips in Javascript

Creating a ToolTips in JSP Using javascript 

  // Display the string value as a tooltip
  // This should be called in onMouseMove() and onMouseOver()

  // Usage onMouseOver('abc'.showTooltip()) onMouseMove('abc'.showTooltip())



  String.prototype.showTooltip =
  function()
  {
   var tooltip = document.createElement("div");
   tooltip.id = "Tooltip_1";
   tooltip.style.position = 'absolute';
   tooltip.style.display = 'block';
   tooltip.style.backgroundColor = '#FFFFE1';
   tooltip.style.color = '#000000';
   tooltip.style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";
   tooltip.style.fontWeight ="normal";
   tooltip.style.fontSize = "11px";
   tooltip.style.border =  '1 #000000 solid';
   x = event.clientX + document.body.scrollLeft;
   y = event.clientY + document.body.scrollTop + 10;
   tooltip.style.left = x;
   tooltip.style.top = y;
   document.body.appendChild(tooltip);
   var prefix = '  ';
   var suffix = '  ';
   tooltip.innerHTML = prefix +
   this + suffix;
  };

Javscript ToolTip usage :

To Showthe tooltip text call the showTooltip() function from your jsp/html page :
....
<input type="text" name="fileName" onmouseover="('Tool Tips sample'.showTooltip())" />
</td>
....
<td valign="bottom">