Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Minakshi Mitra Kundu
215
How to add tooltip to show/hide column button
posted

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.

this.grid.toolbar.columnHidingButton.element.nativeElement.title = 'Show Column';

But I want the tooltip to look exactly as it is shown in the below image.

Parents
No Data
Reply
  • 1500
    Offline posted

    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 Tonev
    Associate Software Developer
    Infragistics

Children