Angular ui grid tooltip not working

Question

I am having a problem to display header tooltip on angular-ui-grid.
Here is plunker demo.

Any idea how to make it work?

API says headerTooltip is a boolean, but their example says it's the string you want to show. ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef vs ui-grid.info/docs/#/tutorial/117_tooltips - so yes, good question! — S. Baggy
I was able to patch it for now using my solution below, Hopefully it will help for now. — Larry Lane

Larry Lane Larry Lane · Accepted Answer · 2016-03-21T12:35:58

I have not been able to figure out how to make the directive work properly internally by setting the headerTooltips as strings. The directive developers are making it work using a different implementation than yours that can be seen in this Plunker.

This solution will patch the problem until a better or more permanent one can be found. Place it at the end of your service call inside of your controller like the following.

upareneStavkePromise.then(function(upareneStavkeData){
            $log.debug(upareneStavkeData);
            $scope.ucitaniUpareniPodaci = true;
            $scope.gridOptionsUpareniPodaci.data = upareneStavkeData.grupe;
            upareneStavkeTotals = upareneStavkeData.totals;


             /*
              * Patch for possible bug:
              * Description: Setting headerTooltip property
              * value as a string doesn't render the value at
              * runtime.
              *   
              */ 

            //class for the header span element
            var headerClass = ".ui-grid-header-cell-primary-focus";

            //the column definitions that were set by the developer
            var colDefs = $scope.gridOptionsUpareniPodaci.columnDefs;

            //Get the NodeList of the headerClass elements.
            //It will be an array like structure.
            var headers = document.querySelectorAll(headerClass);    

                //loop through the headers
                angular.forEach(headers,function(value,key){//begin forEach

                    //Set the title atribute of the headerClass element to
                    //the value of the headerTooltip property set in the columnDefs
                    //array of objects.
                    headers[key].title = colDefs[key].headerTooltip;                    


                });//end forEach


            /****************END PATCH********************/          


        });

Angular ui grid tooltip not working

1 Answers