Creating a ToolTips in JSP Using javascript
// Display the string value as a tooltip
// This should be called in onMouseMove() and onMouseOver()
// 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">
reallly usefull.....thanks
ReplyDeleteTHanks very much for this post. Really useful. SOmething I noticed here, the code doesn't hide the tooltip when the mouse moves out of the area. So I added a 'hidetooltip' function where I hide the div, and this function is called from 'onmouseout'. But somehow its just working for the first time, and for the further 'onmouseover's, the page is stacked with the divs. Kindly could you provide a workaround for this? Thanks
ReplyDelete