OnMouseOver displays Tooltip from hidden column of classic report

Question

What: The Goal:
Make easily available more information than fits on one line of the screen without using multiple fixed lines.
Background:
Classic report with 18 data items (columns) visible. Has Search box and user can choose number of rows displayed.
A couple data items can be long (20-30 characters) compared to the screen width. The right-most data item might run 100 characters.
Proposed Strategy:
1) Display the first n characters of the long item(s) on the report.
2) On onMouseOver display the entire item.
Proposed Approach:
1) For each column with long data, hold the entire value in a hidden item.
2) Display long (hidden) value in tooltip (bubble?/balloon?) upon onMouseOver of that value.
Note: This is not ToolTip/Help for a column but display of the long value for a specifc item in the row of a column.
Sought After Feature:
1) To reduce maintenance, would like to implement for multiple columns using a single common block of code.
Question:
Given other approaches you know, is this a good approach to achieve the goal? Alternative approaches?
Howard

Answer 1

Well it took a while and you really made me work for this. :)
For the end result hover on the Job Ln Nm column.
http://apex.oracle.com/pls/apex/f?p=991202:1
I added some old code I had laying around. It adds a bubble that will stay up for 5 sec or until you click away or hover on another record.
What I would do at this point is just truncate (with a substr) the length of the Long Nm to something short. Use whatever indicator you want for the hover. Like for example these glasses <img src="#IMAGE_PREFIX#Fndview1.gif"> It's really up to you.
You'll see there's an AJAX Callback PLSQL where you can retreive and format the content of the popup to whatever you want. You could make it real pretty.
Here's what I did:
1. New ShowJob javascript procedure.
function ShowJob(pThis,pId){
     this.dTimeout;
     clearTimeout(this.dTimeout);
     this.dGet = dGet;
     this.dShow = dShow;
     this.dCancel = dCancel;
     var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=FULL_LONG_NAME',$v('pFlowStepId'));
     this.dGet();
     return;
     function dGet(){
           this.dTimeout = setTimeout("this.dCancel()",6500);
          get.addParam('x01',pId);
           get.GetAsync(dShow);
     function dShow(){
           $x_Hide('rollover');
           if(p.readyState == 1){
           }else if(p.readyState == 2){
           }else if(p.readyState == 3){
           }else if(p.readyState == 4){
                 $x('rollover_content').innerHTML = p.responseText;
                 $x_Show('rollover');
            var l = findPosX(pThis)+pThis.offsetWidth+5;
                 var t = findPosY(pThis);
            $x_Style('rollover','left',l + 'px');
                 $x_Style('rollover','top',t + 'px');
// This math would center on the vertical           
//                 $x_Style('rollover','left',findPosX(pThis)+pThis.offsetWidth+5);
//                 $x_Style('rollover','top',findPosY(pThis)-($x('rollover').offsetHeight/2)+($x(pThis).offsetHeight/2));
               document.onclick = function(e){
               dCheckClick(e);
           }else{return false;}
     function dCheckClick(e){
          var elem = html_GetTarget(e);
          try{
                    var lTable = $x_UpTill(elem,"DIV");
                    if(lTable.id!='rollover_content'){dCancel();}
                    else{}
          }catch(err){dCancel();}
     function dCancel(){
           $x_Hide('rollover');
          document.onclick = null;
           get = null;
}2. Rollover div on the page footer (div id="rollover"...). Of course this could be a region also.
&lt;div id="rollover" style="display:none;color:black;background:#FFF;border:2px solid #369;width:290px;position:absolute;padding:4px;">
&lt;div id="rollover_content">&lt;/div>
&lt;/div>
3. PLSQL AJAX Callback. : FULL_LONG_NAME
-- select your value with apex_application.g_x01
htp.p('You hover over ' || apex_application.g_x01 || '<br>');
htp.p('Here is the Full Long Name: XXXXXXX XXXXXXX XXXXXXX 1234565');4. Changed Long Nm column to be a link with the onmouseover call that calls the new procedure ShowJob. I made the assumption that with the NUM parameter you could fetch the full record of what you need.
onmouseover="ShowJob(this,#NUM#)"
That should be it.
Let me know what you think.
-Jorge
Edited by: jrimblas on Apr 22, 2013 1:05 PM: Added code to post for completion