10 Replies Latest reply: Oct 3, 2012 3:08 AM by 958488 RSS

    Can you please give some tips about Tooltip used in the new packaged apps

    958488
      Hello,
      I am using apex 4.1 theme 23.
      I would like to use the tooltip used in the new packaged app.
      Can you please give some tips or "Details" about Tooltip used in the new packaged apps. eg: Go Live Check List application.
      Once we hover over "Check List Items" region. we get the tootip.

      1- How to find the class "detailedStatusList"
      2- How to find "detailedStatusListToolTip();" Javascript function used in "Execute when Page Loads"
      3- Is there any tool to generate the source of the "Check List Items" region.

      I am not sure if there is more I have to know ..

      * the tooltip plugin is not solid...

      Kind Regards,
      Water
        • 1. Re: Can you please give some tips about Tooltip used in the new packaged apps
          VC
          Hi,

          If you look at the page source and view the file 4_1.js > you can see detailedStatusListToolTip js function

          And for other things you can install the Issue Tracker packaged app and edit it to see the code behind

          Thanks
          • 2. Re: Can you please give some tips about Tooltip used in the new packaged apps
            Hari_639
            Hello Water,
            2- How to find "detailedStatusListToolTip();" Javascript function used in "Execute when Page Loads"
            I got the code with firebug.
            function detailedStatusListToolTip() {
            this.xOffset = 0; // x distance from mouse
            this.yOffset = 10; // y distance from mouse
            jQuery("ul.detailedStatusList > li[class!=detailedStatusListLegend]").hover(
            function(e) {
            var insideText = jQuery("section.detailedListTooltip",this).html()
            this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
            $('body').append('<div id="detailedStatusListToolTip">' + insideText + '</div>' );
            $('div#detailedStatusListToolTip').css("top", this.top+"px").css("left", this.left+"px").delay(500).fadeIn("fast");
            },
            function() {
            jQuery("div#detailedStatusListToolTip").fadeOut("false").remove();
            }
            ).mousemove(
            function(e) {
            this.top = (e.pageY + yOffset);
            this.left = (e.pageX + xOffset);
            jQuery("div#detailedStatusListToolTip").css("top", this.top+"px").css("left", this.left+"px");
            }
            )
            } 
            Is there any tool to generate the source of the "Check List Items" region.
            No, it's a simple PL/SQL Dynamic Content Region. You can unlock the packed app and see how they are generating required HTML from PL/SQL for this region.
            1- How to find the class "detailedStatusList"
            I don't think it's so important.

            If you can understand jquery [url http://api.jquery.com/hover/]hoverurl function and if you know how to bind this to specific DOM elements, then you can develop such tool-tips easily.

            Let me know if you have any questions.

            Regards,
            Hari
            • 3. Re: Can you please give some tips about Tooltip used in the new packaged apps
              958488
              Thanks Hari,
              .... you can develop such tool-tips easily.
              Let me know if you have any questions.
              I created an app based on DEPT table on:
              [url http://apex.oracle.com] apex.oracle.com
              workspace: somefeto
              user: test
              pwd: test
              App Name: tooltip
              ID: 14149

              I have two regions. one with Dynamic PL/SQL and the other is IR..
              I could not do it on the Dynamic region..

              Can you please have a look ??

              My goal is to use it in IR for notes column. I cannot show all the notes on the report. so I use RPAD to show only the first few words. and the rest should be available using the Tooltip.

              * I already tried to use the Tooltip plugin [url http://apex-plugin.com/oracle-apex-plugins/dynamic-action-plugin/tooltip_51.html] here , but it is causing problem in my app.

              Kind Regards,
              Water
              • 4. Re: Can you please give some tips about Tooltip used in the new packaged apps
                Hari_639
                Hello Water,
                My goal is to use it in IR for notes column. I cannot show all the notes on the report. so I use RPAD to show only the first few words. and the rest should be available using the Tooltip.
                Done :D

                You should use SUBSTR to restrict notes to few words, Not RPAD.

                <li>I have changed the IR query as follows..
                select 
                Deptno,
                Dname,
                Loc,
                substr(notes,1,25) || '&lt;div class="long-notes" style="display:none;">'||notes||'</div>' as "Notes"
                 from   "DEPT" 
                <li> Column Attributes: Notes > Column Formatting > HTML Expression
                &lt;div class="short-notes">#Notes#</div>
                <li> Edit Page > JavaScript > Function and Global Variable Declaration
                function setNotesToolTip() {
                     this.xOffset = 0; // x distance from mouse
                     this.yOffset = 10; // y distance from mouse
                jQuery("div.short-notes").hover(
                     function(e) {
                          var insideText = jQuery("div.long-notes",this).html()
                          this.top = (e.pageY + yOffset);
                          this.left = (e.pageX + xOffset);
                          $('body').append('<div id="notes-tooltip">' + insideText + '</div>' );
                          $('div#notes-tooltip').css("top", this.top+"px").css("left", this.left+"px").delay(500).fadeIn("fast");
                     },
                     function() {
                          jQuery("div#notes-tooltip").fadeOut("false").remove();
                     }
                ).mousemove(
                     function(e) {
                          this.top = (e.pageY + yOffset);
                          this.left = (e.pageX + xOffset);
                          jQuery("div#notes-tooltip").css("top", this.top+"px").css("left", this.left+"px");
                     }
                )
                }
                <li> Edit Page > Header and Footer > Footer Text
                &lt;style>
                div#notes-tooltip {
                    background-color: #F8F8F8;
                    border: 1px solid #AAAAAA;
                    border-radius: 3px 3px 3px 3px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
                    position: absolute;
                    width: 420px;
                    padding: 4px;
                }
                &lt;/style>
                <li> And finally called setNotesToolTip(); during page load. (Execute when Page Loads)

                Regards,
                Hari
                • 5. Re: Can you please give some tips about Tooltip used in the new packaged apps
                  958488
                  You are fantastic,

                  I put setNotesToolTip(); in a DA for After refresh event so that it works even if the IR get refreshed.
                  I put the JS function in a file and uploaded it into the Static file of the application and referenced the file in the page template.
                  <script src="#WORKSPACE_IMAGES#tooltip.js"></script>
                  and it is working fine. but when I tried to do the same for the CSS code, did not work.
                  <link rel="stylesheet" href="#WORKSPACE_IMAGES#tooltip.css">

                  The CSS file I referenced contains another class which worked. but the tooltip attributes do not work ??

                  Can you help please ?

                  and by the way, why did you advise to put the CSS in :
                  Edit Page > Header and Footer > Footer Text
                  What is the difference if between the Footer Text and HTML Header ?. for it worked when I put the CSS in HTML Header .

                  Kind regards,
                  Water

                  Edited by: cold_water on Sep 24, 2012 10:31 AM

                  Edited by: cold_water on Sep 24, 2012 10:35 AM
                  • 6. Re: Can you please give some tips about Tooltip used in the new packaged apps
                    Hari_639
                    I put setNotesToolTip(); in a DA for After refresh event so that it works even if the IR get refreshed.
                    Yes, I forget that ;)
                    The CSS file I referenced contains another class which worked. but the tooltip attributes do not work ??
                    Please put the type. It's always good to specify the type
                    &lt;link rel="stylesheet" href="#WORKSPACE_IMAGES#tooltip.css" type="text/css">
                    Please ensure you are not using +&lt;style>+ tags in CSS file. You don't need to have them :D


                    Where are you referring this CSS file in template? Make sure this is the last CSS file you refer, so that these CSS definitions takes preferences over other definitions, if any.
                    And finally try changing CSS to following..
                    body div#notes-tooltip {
                        background-color: #F8F8F8;
                        border: 1px solid #AAAAAA;
                        border-radius: 3px 3px 3px 3px;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
                        position: absolute;
                        width: 420px;
                        padding: 4px;
                    }
                    Inspect with tools like firbug and see what styles are being applied, what styles are being overridden by others.
                    What is the difference if between the Footer Text and HTML Header ?. for it worked when I put the CSS in HTML Header .
                    If you see your page template, you can see sections like "Header, Body, Footer".

                    <li>When you put some CSS or JS or HTML in "Footer Text" section of page, then APEX will render all these code before "Footer" section of template while rendering the page.
                    <li>When you put some CSS or JS in "HTML Header" section of page, then APEX will replace the #HEAD# substitution string in the page template header with the code you have entered. ("Header" section of template)

                    <li>If some CSS definitions should be applied along with page load, then I put CSS under " HTML Header" or "Header Text" sections of page.
                    <li>If some CSS definitions are not being referred during page load and will be used only when user performs some actions like "clicking on some button or mouse hover etc." then I put the CSS code under "Footer Text" sections of page.

                    For e.g. CSS for report-templates etc should be kept under HTML Header section. CSS for overlays, tool-tips etc. can be put under "Footer Text" sections of page. With with all these, your page can be loaded a bit faster :D

                    Hope it helps.

                    Regards,
                    Hari
                    • 7. Re: Can you please give some tips about Tooltip used in the new packaged apps
                      958488
                      Thanks for your reply,

                      I applied your instructions, but it did not work. I had to mention that I am working on Apex 4.1
                      where Column Formatting is not available in IR. So, I used Column Link > Link Text
                       <div class="short-notes">#Notes#</div>
                      And Column Link > URL
                      javascript:;
                      * I did that and uploaded the CSS and JS files on apex.oracle.com. Perhaps, you can have a look...

                      So, can we find a solution, or I have to paste the CSS on all the pages that use tooltip ??

                      Kind Regards,
                      Water
                      • 8. Re: Can you please give some tips about Tooltip used in the new packaged apps
                        Hari_639
                        Hello Water,

                        Its working fine for me! I have tested in IE8 and FF10 browsers.

                        Clear your browser cache and Test again

                        Also it's good idea to upload CSS files under
                        Home > Application Builder > Application 14149 > Shared Components > Cascading Style Sheets
                        Regards,
                        Hari
                        • 9. Re: Can you please give some tips about Tooltip used in the new packaged apps
                          958488
                          Thanks Hari,

                          Now, I tried to apply the steps on Classic report, but it does not work.. The tooltip show "null". If you could just complete your favor and guide me to set up the tooltip for Classic report .

                          Best Regards,
                          Water

                          Edited by: cold_water on Sep 30, 2012 12:22 AM
                          • 10. Re: Can you please give some tips about Tooltip used in the new packaged apps
                            958488
                            Hi Hari,

                            I hope that you keep me in mind !!! or Should I post a new thread ?

                            Regards,
                            Water