11 Replies Latest reply on Jun 27, 2018 2:43 PM by 2972982

    How do I get a tooltip in de label of a IG column?

    Michel Vogelpoel

      Apex 5.1.1

       

      If there is lots of columns in an interactive grid de labels can't be read very well. Even 'breaking' de label with </BR> doesn't always display the full label

      I want to have a tooltip over de label in an Interactive Grid column.

       

      Can anyone help me how to achieve this?

        • 1. Re: How do I get a tooltip in de label of a IG column?
          Michel Vogelpoel

          I have found a solution:

          in de heading do this:    <span onmouseover="toolTip_enable(event, this,'Dierteldagen oorspronkelijk')">DTD</BR>oorspron-</BR>kelijk</span>

          • 2. Re: How do I get a tooltip in de label of a IG column?
            John Snyders-Oracle

            The ideal way to do this would be to use the built-in tooltip support advanced config option of the grid widget

             

            function(config) {

              config.defaultGridViewOptions = {

                tooltip: {...}

              }

              return config;

            }

             

            There is an example in Sample Interactive Grids page 52. However grid does not currently support tooltips on the column headers. I'm thinking of changing that for 5.2.

             

            One thing to consider is that the toolTip_enable functions are moving to legacy.js in the near future so it would be good to stay away from those old undocumented functions.

             

            You could do the same thing with the jQuery UI tooltip widget. Something like this after the page loads:

             

            apex.region("emp").widget().find(".a-GV-hdr").tooltip({

              item: ".a-GV-headerLabel",

              content: function() { return $(this).text() }

            });

             

            Regards,
            -John

            • 3. Re: How do I get a tooltip in de label of a IG column?
              user626848

              Hi John,

               

              This suggestion about tooltip is very useful.

              In your example in page 52 of Sample IG, we bring as tooltip value what is already present in the row.

              But, I am interested in selecting some data from the database when

              hovering specific cell in the IG.

              Have you any example about that.

              I suppose we have to use some ajax call.

               

              Thank you,

               

              Ozren Pestic

              Croatia

              • 4. Re: How do I get a tooltip in de label of a IG column?
                Alli Pierre Yotti

                Hi,

                if i have unterstand your question correctly, you can use a Hidden Column and use it in tooltip.

                 

                Or what do you means with "

                in selecting some data from the database when

                hovering specific cell in the IG."?

                 

                 

                or you can use that plugin

                 

                https://apex.world/ords/f?p=100:710:1216710532713::::P710_PLG_ID:APEX.DYNAMICTOOLTIP

                • 5. Re: How do I get a tooltip in de label of a IG column?
                  user626848

                  Hi, and thank you for your comments.

                   

                  Yes, I know how to use tooltip using hidden column.

                   

                  But, depending on the value of some value, for example patient ID,

                  I would like to query some interesting data from table and show it in the tooltip.

                  For example, during patient visit, I can't put all the data on the screen.

                  If I want to see additional information about adres ,phone , next of kin, if the patient is donnor of organs....I could do it through tooltip,

                  instead of opening some additional window or region.

                   

                  Kind regards,

                  Ozren

                  • 6. Re: How do I get a tooltip in de label of a IG column?
                    Alli Pierre Yotti

                    You can use the above Plugin. It pull the Data live from the database

                    • 7. Re: How do I get a tooltip in de label of a IG column?
                      John Snyders-Oracle

                      Hi Ozren,

                      You you can do an ajax request to get the tooltip content. It makes the tooltip a bit slower to show the content but it can be done. See the jQuery UI tooltip documentation.

                      Note that the callback function  "can either return the content directly, or call the first argument, passing in the content, e.g., for Ajax content."

                       

                      So a sketch of what that it looks like is:

                       

                      apex.region("emp").widget().find(".a-GV-hdr").tooltip({

                        item: ".a-GV-headerLabel",

                        content: function(callback) {

                           var promise = apex.server.process(...);

                           promise.done(function(data) {

                               // do something with data?

                               callback(data);

                           });

                      });

                       

                      Regards,
                      -John

                      • 8. Re: How do I get a tooltip in de label of a IG column?
                        user626848

                        Thank you.

                        I will try.

                         

                        I have one more question. Actualy, I post it on your blog about IG, but I will repeat it here.

                        I use IG because we can use Oracle JET for charts.

                        We prepare and save public reports in IG, and in one IG we have multiple charts depending on filters.

                        Sometimes it would be nice to call IG but to position user on specific report(chart).

                        But as I can see there is no simple way to call a desired report. I can't even see all reports in application builder.

                        You suggested to find out what is ID of the report and then hard code it in call to specific report.

                        Is there any way to solve it like it is possible in interactive reports?

                        How I can refer to specific saved report if I want to change for example tooltip labels ( series, group, x, y )?

                        In one chart label is month in some other it is department and so on.

                         

                        Regards,

                        Ozren

                        • 9. Re: How do I get a tooltip in de label of a IG column?
                          user626848

                          Thank you Alli,

                           

                          but it is for interactive reports. I work in IG.

                          In IR there is column formatting and HTML span.

                          Where I will put it in IG?

                          I can't find any property where I could put the code that is suggested in plug-in.

                           

                          Regards,

                          Ozren

                          • 10. Re: How do I get a tooltip in de label of a IG column?
                            Peter.N

                            It is also possible to do an ajax callback in the grid config.

                            The ajax callback function does some HTP output. By using the callback it waits for the process to complete.

                             

                                config.defaultGridViewOptions = {
                                  tooltip: {
                                        // when the tooltip is integrated with the grid view the content callback
                                        // gets some extra helpful parameters
                                        content: function(callback, model, recordMeta, colMeta, columnDef ) {
                                            var text = null;

                                            if ( columnDef && recordMeta) {                 

                                                if ( columnDef.property === "SOME_COLUMN" ) {
                                                    var promise1 = function(param) {
                                                        return  apex.server.process ( "SOME_CALLBACK", {
                                                                            x01: model.getValue( recordMeta.record, "SOME_COLUMN" ),
                                                                            x02: model.getValue( recordMeta.record, "SOME_COLUMN2" ),
                                                                             
                                                                            },                                           
                                                                            {
                                                                                success: function( pData ) {
                                                                                    apex.debug(pData);                                                     
                                                                                    return pData;
                                                                                },
                                                                                dataType: "text"
                                                                            } )
                                                                            ;
                                                    };

                                                    Promise.all([promise1()])
                                                    .then(function(data) {
                                                        callback(data);
                                                    }).catch();                                                                 
                                                }                 
                                            }

                                        }
                                    }
                            • 11. Re: How do I get a tooltip in de label of a IG column?
                              2972982

                              I am trying to wrap text (content) of the tooltip.

                              I tried tooltipClass and Class = {} object

                              Any  working example ?

                               

                              thank you