Tuesday, March 25, 2008

Display ToolTip in Javascripts

Following are the HTML and Javascripts code to display tooltip:

Html Code ---

<span id="spanName" style="font-weight: bold;" onmouseover="javascripts:DisplayToolTip('true');"

<div id="divToolTip" style="position: absolute; display: none; z-index: 20;
background-color: #FFFFE1; border: solid 1px Black;">

<script type="text/javascript">
function DisplayToolTip(flag)
document.getElementById('divToolTip').style.left = window.event.x;
document.getElementById('divToolTip').style.top = window.event.y;

if(flag == 'true')
document.getElementById('divToolTip').style.display = 'block';
else if(flag == 'false')
document.getElementById('divToolTip').style.display = 'none';

Following image, shows how the ToolTip will appear after implementing the above code:

No comments: