1. Create Javascript function as follows

<script language="JavaScript" type="text/javascript"> <!-- function findPosX(obj) // Get full right offset { var curleft = 0; if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft obj = obj.offsetParent; } } else if (obj.x) curleft += obj.x; return curleft; } function findPosY(obj) // Get full top offset { var curtop = 0; if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop obj = obj.offsetParent; } } else if (obj.y) curtop += obj.y; return curtop; } function ShowPopup(hv_item) { var t1; // First part of Text formatting var t2; // Latter part of Text formatting dp = document.getElementById("DisplayPopup"); t1 = "<table><tr><td width=200 align='center' bgcolor='gray'><font color='white'>"; t2 = "</font></td></tr></table>"; dp.innerHTML = t1 + hv_item.value + t2; // Set position of hover-over popup dp.style.top = findPosY(hv_item) - 10; dp.style.left = findPosX(hv_item) + 20; // Set popup to visible dp.style.visibility = "Visible"; } function HidePopup() { dp = document.getElementById("DisplayPopup"); dp.style.visibility = "Hidden"; } //--> </script> <DIV ID="DisplayPopup" style="visibility:hidden; position:absolute;"></DIV>

Please note that it includes a DIV tag named DisplayPopup which will be used to populate popup text.

You can personalize the popup in the ShowPopup function. This includes font's color, background color, popup width as well as X-Y offset position.

2. Add the following Javascript events to the Element Attributes of the column you want to have popup shown.

In my sample, I added the following Javascript events to both Ename and Job columns.

onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"