I want to add tooltip to show/hide column button.
I have added this piece of code to show the title on hover but cannot change the style of the title.
But I want the tooltip to look exactly as it is shown in the below image.
Hello Minakshi,
Thank you for posting on our forums.
I would suggest removing the button title, and using our IgxTooltip component if you are looking to add custom tooltip to an element:
<div #tooltipRef="tooltip" igxTooltip> Show/Hide </div> <igx-grid-toolbar> <igx-grid-toolbar-title>Title</igx-grid-toolbar-title> <igx-grid-toolbar-actions> <igx-grid-toolbar-hiding #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"></igx-grid-toolbar-hiding> </igx-grid-toolbar-actions> </igx-grid-toolbar>
More information on igxTooltip can be found on our website here:
www.infragistics.com/.../tooltip
Sincerely,Tihomir TonevAssociate Software DeveloperInfragistics
Yes, I know how to add tooltip to buttons and already applied in my code. As, I am enabling show/hide by
Hello,
There have been breaking changes for the toolbar since the release of Angular 11, so I suppose you are not using our latest version as well. More information about the latest changes can be read on our website here:
https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-11-0-0-release
Could you please let me know what version of IgniteUI and Angular are you using.
Looking forward to your reply.
I am using an older version i.e. Angular 8. So I could not apply the changes you have suggested.
I am curious to know, how the tooltip for columnHiding was taken care in older version like Angular 8.
The issue with older versions is that the toolbar was not really exposed, so what you would need to do is, re-template the toolbar from scratch.
<ng-template igxToolbarCustomContent let-sampleGrid="grid"> <button igxButton="flat" igxRipple igxRippleCentered="true" (click)="openColumnFilteringUI()"> <igx-icon fontSet="filter-icons" name="does_not_contain"></igx-icon> Filter </button> </ng-template>
This means you will have to put custom content there, including a button, which will be the columnHidingButton. Then you'd need to handle the click event of that button, and use the IgxToggle and IgxOverlay directives to display the content on the proper position. More information about that here.
And finally, you can see from here how to host the columnHidingUI in a container, which will be the pop up.
Please note that this is all now refactored and changed, so it will not be receiving any future updates. I would recommend updating to our latest version of IgniteUI if you are looking for improvements in this area.
I will try out this and let u know.
Should you need further help, please let me know.
Thank you for using Infragistics components.