custom tooltip

[Suman Kumar]

can i do something like this in pivotview?

https://ej2.syncfusion.com/angular/documentation/grid/how-to/custom-tool-tip-for-columns/

[Sivamathi Natarajan]

Hi Suman, 

 

Thanks for contacting Syncfusion Support. 

 

We suspect that your requirement is to set custom tooltip on hovering column and row headers. So, based on that we have prepared a sample which is available in below. 

 

Code Example:  

load(args: any): void { 

    let tooltip: Tooltip = new Tooltip({ 

      target: 'th.e-columnsheader, td.e-rowsheader', 

      enableRtl: this.pivotGridObj.enableRtl, 

      beforeOpen: function (args) { 

        args.element.classList.add('e-pivottooltipwrap'); 

      }, 

      beforeRender: function (args) { 

        tooltip.content = ''; 

        if (args.target.classList.contains('e-rowsheader') || args.target.classList.contains('e-columnsheader')) { 

          tooltip.content = '<div class="e-pivottooltip e-pivottooltip-wrap"><p>' + args.target.innerText + '</p></div>'; 

        } 

        else { 

          args.cancel = true; 

        } 

      } 

    }); 

    tooltip.appendTo(this.pivotGridObj.element); 

  }; 

 

 

Meanwhile, we have prepared sample for your reference. Please find the sample in below link. 

 

Sample Link: https://stackblitz.com/edit/angular-2uvfvb-fcwhca?file=app.component.html 

 

Please let us know if you have any other queries? 

 

Regards, 

Sivamathi Natarajan 

[Suman Kumar]

is this for angular pivot view, it doesn't seem to work ? If yes, where can i put my custom message in it?

[Sivamathi Natarajan]

Hi Suman, 

 

Your requirement can be achieved by load event. We have provided sample to display the row header and column header value as tooltip value. You can customize your content in tooltip.content parameter. Kindly check the below code example. 

 

Code Example: 

load(args: any): void { 

    let tooltip: Tooltip = new Tooltip({ 

      target: 'th.e-columnsheader, td.e-rowsheader', 

      enableRtl: this.pivotGridObj.enableRtl, 

      beforeOpen: function (args) { 

        args.element.classList.add('e-pivottooltipwrap'); 

      }, 

      beforeRender: function (args) { 

        tooltip.content = ''; 

        if (args.target.classList.contains('e-rowsheader') || args.target.classList.contains('e-columnsheader')) { 

          tooltip.content = '<div class="e-pivottooltip e-pivottooltip-wrap"><p>' + args.target.innerText + '</p></div>';  

         @*you can customize the tooltip content here.*@ 

        } 

        else { 

          args.cancel = true; 

        } 

      } 

    }); 

    tooltip.appendTo(this.pivotGridObj.element); 

  }; 

 

Sample Link: https://stackblitz.com/edit/angular-2uvfvb-tpn6zf?file=app.component.html 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi.