OraExplorer

I just answered APEX forum on the pop-up when hovering over tabular column. It is a quick solution.

1. Create Javascript functions as follows. The description of each function is self-explanatory in its name.

<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>";

    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>

Note that above includes a DIV tag named DisplayPopup which will be used to store the pop-up text.

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

2. Call ShowPopup and HidePopup by onMouseOver and onMouseOut Javascript events respectively from the Element Attributes of the column you want to have pop-up shown.

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

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

Tags: hover, popup, tabular