How to add tooltip to show/hide column button | Infragistics Forums

State Not Answered
Replies 7 replies
Subscribers 7 subscribers
Views 2450914 views
Users 0 members are here

215

How to add tooltip to show/hide column button

Minakshi Mitra Kundu posted over 3 years ago

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.

215

Offline Minakshi Mitra Kundu posted over 3 years ago in reply to Tihomir Tonev

Yes, I know how to add tooltip to buttons and already applied in my code. As, I am enabling show/hide by

<igx-grid #inGrid [data]="inRecords"

                [autoGenerate]="false"

                displayDensity="comfortable"

                width="100%"

                [paging]="false"

                [allowFiltering]="false"

                [showToolbar]="true"

                [columnHiding]="true"

                columnHidingTitle="Column Hiding">

so not sure how to add tooltip here.
Cancel
Reply

Cancel
1500

Offline Tihomir Tonev posted over 3 years ago
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
Cancel
Reply

Cancel