This discussion is archived
12 Replies Latest reply: Apr 18, 2013 9:41 AM by Howard (... in Training) RSS

onMouseOver displays Tooltip from hidden column of classic report

Howard (... in Training) Pro
Currently Being Moderated
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
  • 1. Re: onMouseOver displays Tooltip from hidden column of classic report
    jrimblas Expert
    Currently Being Moderated
    Hi Howard,
    Sounds like a nice solution to a common problem. I would recommend something like this.
    1. Add a span to your record with a class that hides the content by using a CSS command display: none
    2. On hover you set the css to display: inline

    Of course you can fine tune the display to be a tooltip or anything else you want really, but this is the basic concept.
    select 
     decode(sign(length(entry_text)-20)
               , -1, entry_text
               , substr(entry_text, 1, 20)
                       || '<a href="#" class="expand"><span class="expand_more"> more</span><span class="extra_content">' 
                       || substr(entry_text,20+1,100) || '</span></a>') entry_text
    In this case I'm displaying 20 chars and showing the link "more". When you hove it shows the rest. If the sign is -1 then you have less than 20 chars, otherwise you want the expand.

    The CSS:
    .extra_content {display: none;}
    .expand:hover .extra_content {display: inline;}
    .expand:hover .expand_more {display: none;}
    This is untested, but it's the basic functionality I would follow.
    It would also be easy to get rid of the "more" link and simply do it on cell hover by having CSS that looks at the TD element or something similar.

    Thanks
    -Jorge
  • 2. Re: onMouseOver displays Tooltip from hidden column of classic report
    VC Guru
    Currently Being Moderated
    jrimblas wrote:
    Hi Howard,
    Sounds like a nice solution to a common problem. I would recommend something like this.
    Except - all this formatting(anchors & spans) can go into the APEX layer i.e. report attributes

    Avoid doing any html formatting in sql queries because you can do it in the APEX report attributes/templates
    select 
    decode(sign(length(entry_text)-20)
               , -1, entry_text
               , substr(entry_text, 1, 20)
    || '<a href="#" class="expand"><span class="expand_more"> more</span><span class="extra_content">' 
    || substr(entry_text,20+1,100) || '</span></a>') entry_text
  • 3. Re: onMouseOver displays Tooltip from hidden column of classic report
    Howard (... in Training) Pro
    Currently Being Moderated
    Jorge,
    .extra_content {display: none;}
    .expand:hover .extra_content {display: inline;}
    .expand:hover .expand_more {display: none;}
    Where would this CSS go? I see no place for it in the Report Region Definition.

    I want to avoid editing templates. I'll do that if I have too but that's not my first choice for this.

    Thanks,
    Howard
  • 4. Re: onMouseOver displays Tooltip from hidden column of classic report
    Howard (... in Training) Pro
    Currently Being Moderated
    Vikram,

    Would these APEX layer report attributes changes be done declaratively from the GUI or would any/all of this require template changes? I want to avoid template changes -- especially complex ones -- for now.

    Thanks,
    Howard
  • 5. Re: onMouseOver displays Tooltip from hidden column of classic report
    jrimblas Expert
    Currently Being Moderated
    Hi Howard, there are many places to add this.
    If you're in 4.2 edit the page attributes and under the CSS section add it to the inline field just like I added it.

    If in 4.1 or earlier, you could also add it on the page attributes, but I would put it on the "HTML Header" field and make sure you wrap it with <style> tags.
    Or my latest favorite option because it makes it more obvious to others. Create a No Template region, before all your regions, call it something like override.css and place the CSS in there also with <style> tags.

    Thanks
    -Jorge
  • 6. Re: onMouseOver displays Tooltip from hidden column of classic report
    Howard (... in Training) Pro
    Currently Being Moderated
    Jorge,

    No joy. I wrapped the CSS with <style></style> and placed in Page Header Text.

    I changed the JOB_LNG_NM entry to
    decode(sign(length(JOB_LNG_NM)-20)
         , -1, JOB_LNG_NM
         , substr(JOB_LNG_NM, 1, 20)
          || '<a href="#" class="expand"><span class="expand_more"> more</span><span class="extra_content">' 
          || substr(JOB_LNG_NM,20+1,100) || '</span></a>') JOB_LNG_NM 
    But it did not recognize the HTML in this query. What I got was:
    DATA BEGINS HERE7890<a href="#" class="expand"><span class="expand_more"> more</span>
    <span class="extra_content">REST OF DATA HERE</span></a>
    Howard
  • 7. Re: onMouseOver displays Tooltip from hidden column of classic report
    jrimblas Expert
    Currently Being Moderated
    You're almost there.

    Change your column's Display As to "Standard Report Column" so the HTML content is not escaped.
    Cross Site Scripting warning, if the content of the JOB_LNG_NM column could be maliciously manipulated by a user then you also want to escape it's value (with something like APEX_EXSCAPE.HTML(JOB_LNG_NM)).

    Thanks
    -Jorge
  • 8. Re: onMouseOver displays Tooltip from hidden column of classic report
    VC Guru
    Currently Being Moderated
    Howard (... in Training) wrote:
    Vikram,

    Would these APEX layer report attributes changes be done declaratively from the GUI
    Yes. Under report attributes
  • 9. Re: onMouseOver displays Tooltip from hidden column of classic report
    Howard (... in Training) Pro
    Currently Being Moderated
    Jorge / Vikam / All,

    I've managed to get control over screen formatting (i..e, control of spacing/padding/font-size, etc.) -- see: {thread:id=2523731} and column wrapping -- see: {thread:id=2524132} thanks to Paul.
    See: http://apex.oracle.com/pls/apex/f?p=4550:1:2807482452656:::::
    WS: APEX_EXAMPLES_01
    USER: demo
    PW: demo
    Application: BPS_f991202 Page 1

    Jorge,
    I like the technique you suggested above. But the four letters "more" make such a small hot spot for a target that I think I'd need the whole cell to be the "target". Now, the cell resizes in a jittery way when I hover over "more".

    And BTW, I have not been able to get this working in APEX 4.2 on apex.oracle.com. The HTML that I am adding for column wrap (
    <div>#JOB_LNG_NM#</div>
    ) seems to conflict with SQL you gave above. I get your way to work in APEX 4.1, but I have to remove
    <div>#JOB_LNG_NM#</div>
    for it to work. I don't know what to change in the code to account for the "div" which is enabling the column wrap.

    If you are still interested, you can see what I have in the application in the above WS, page 3, column Job Lng Nm. It shows "BEGINNING STUFFmoreREST OF STUFF". And "more" is not a hot spot. If you are up to the bother, I'd like to know how to make it work. But I'm looking in a different direction now.

    My original thought had been to display this additional information in a balloon but now I realize that 100+ characters is really too much for a balloon. There is so much information in the Ticket ID and Ticket Description that I think I'll try to display that is a popup.

    I'll leave this open for a day or so in case you have any come-back.

    Thanks for your help,
    Howard
  • 10. Re: onMouseOver displays Tooltip from hidden column of classic report
    jrimblas Expert
    Currently Being Moderated
    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
  • 11. Re: onMouseOver displays Tooltip from hidden column of classic report
    Howard (... in Training) Pro
    Currently Being Moderated
    Jorge,

    Fantastic. My head is "a spin" with the possibilities.

    Now I get to port this back to my APEX 4.1.

    Thank you very much!
    Howard
  • 12. Re: onMouseOver displays Tooltip from hidden column of classic report
    jrimblas Expert
    Currently Being Moderated
    Great! Good luck!
    Just FYI, except for the get.addParam call which was introduced later, I think all this code worked since APEX 3.1 :)
    So you should have no issues. :)

    Thanks
    -Jorge

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points