8 Replies Latest reply on Dec 29, 2017 3:07 PM by pmartin

    PI Vision Tooltip configuration

    Floris Zwaard

      Any tips on a proper way to config the Tooltip window?

      Like; color(text/background), size, border, position..

      tooltip.PNG

        • Re: PI Vision Tooltip configuration
          pmartin

          Hi Floris,

           

          PI Vision uses the title attribute to create it's tooltip.  By default, you cannot style this.

           

          If changing the style is imperative, here is a workaround.  Keep in mind that it's quite a hacky solution so apply at your own risk.

          1) Open the template file for your symbols that you want to have a custom tooltip window - I did mine for the value symbol (sym-value-template.html)

          On the parent div, add class='custom-tooltip'.  For the value symbol, it looks like this:

          <div style="overflow:hidden" ng-style="{background:(Fill || config.Fill), height:position.height}" class='custom-tooltip' title="{{tooltip}}">

           

          2) Next, in PIVision/Content/css/shared.css add

          .custom-tooltip[title]:hover:after{
               content: attr(title);
               position: absolute;    
               width: 100%
               background-color: blue;
               border: 1px solid red;
          }
          

           

          This should give you a custom tooltip that you can style.

          1 of 1 people found this helpful
            • Re: PI Vision Tooltip configuration
              Floris Zwaard

              Thank you for you answer.

              Have been trying different options, but does not seem to work. We use the lastest versions of PI.

              Also I think the class must be set between double quotes (class="custom-tooltip") and line '04.' needs an ';' at the end!?

              Also I see that Chrome or IE11 do show the tooltip(in default settings) differenly. While Chrome gives a small wide rectangle, IE11 show a more 'boxy' box centered around the symbol.

                • Re: PI Vision Tooltip configuration
                  pmartin

                  Hi Floris,

                   

                  You are correct that I forgot the ; on line 4 of the CSS.  Both single and double quotes in the html should work.

                   

                  What isn't working about the custom tooltip?  Is the text not showing up or some other issue?  A screenshot of the current result would be helpful if possible.

                  As for the location/styling of the tooltip, you can modify the CSS to get it to a style which you are happy with.

                    • Re: PI Vision Tooltip configuration
                      kbobeck

                      Hi Paul,

                       

                      I was able to get the custom tooltip box to show, but the regular tooltip is still showing as well. Is that to be expected or did I do something wrong?

                       

                       

                      Thanks,

                      Kelsey

                        • Re: PI Vision Tooltip configuration
                          pmartin

                          Hi Kelsey,

                           

                          It's expected. I'm actually not positive the best way to hide it - probably removing the title attribute altogether. I'll do some research and get back to you (probably tomorrow)

                            • Re: PI Vision Tooltip configuration
                              kbobeck

                              Hi Paul,

                               

                              That would be greatly appreciated! What I'd like to do with the custom tooltip is to have it only show the Attribute name (plus Value and Time), versus showing the full path of the Attribute (e.g., \\Server\Company\Site\Equipment|Pressure). Do you think this is achievable?

                               

                              Thanks,

                              Kelsey

                                • Re: PI Vision Tooltip configuration
                                  pmartin

                                  Ok - I got it.  The easiest way is to replace the "title" attribute with a custom attribute.

                                   

                                  Ex from sym-value-template.html:

                                  <div style="overflow:hidden" ng-style="{background:(Fill || config.Fill), height:position.height}" class='custom-tooltip' custom-tooltip-text="{{tooltip}}">
                                  

                                   

                                  and in the css:

                                  .custom-tooltip[custom-tooltip-text]:hover:after{
                                      content: attr(custom-tooltip-text);
                                      position: absolute;
                                      width: 100%;
                                      background-color: white;
                                      border: 1px solid red;
                                  }
                                  

                                   

                                  As for the custom text, take a look in the sym-value javascript.  The tooltip text is generated with this function:

                                  scope.tooltip = PV.Utils.generateTooltip(scope);
                                  

                                   

                                  I won't advocate changing how this method works globally but you could copy the code from this method into a new method called "generateTooltipWithoutPath", modify the code in that method, and call that method instead of generateTooltip in the symbols that you want to use your custom tooltip.

                                  2 of 2 people found this helpful
                      • Re: PI Vision Tooltip configuration
                        nicka

                        I would recommend you try out this trick that was posted on StackOverflow: https://stackoverflow.com/a/16462668/3270037 (although it does require jQuery)

                         

                        // Use a closure to keep vars out of global scope
                        (function () {
                           var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
                          DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
                          showAt = function (e) {
                           var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
                          $("#" + ID).html($(e.target).data(DATA)).css({
                          position: "absolute", top: ntop, left: nleft
                           }).show();
                           };
                          $(document).on("mouseenter", "*[title]", function (e) {
                          $(this).data(DATA, $(this).attr("title"));
                          $(this).removeAttr("title").addClass(CLS_ON);
                          $("<div id='" + ID + "' />").appendTo("body");
                          showAt(e);
                           });
                          $(document).on("mouseleave", "." + CLS_ON, function (e) {
                          $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
                          $("#" + ID).remove();
                           });
                           if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
                        }());
                        
                        
                        

                         

                        Simply run the above code at any point in time and add a css style to configure your tooltips (using the id tooltip)

                         

                        Here's a working JSFiddle to demo: Edit fiddle - JSFiddle