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
370
Igx Grid Cell default tooltip border is cutting off
posted

Please see the sample

https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-pinning

When hovering over any of the record e.g "Owner", "Ana Trujillo" etc at a certain point the border of default tooltip/title is cutting off. 

  • 620
    Offline posted

    Hello Shahab,

    Thank you for posting into our community!

    I have been looking into your question and I was able to reproduce the described behavior when using the Chrome browser. However, when further investigating this matter, I have noticed that this behavior is reproducible on other websites as well.

    Having this in mind, what I could say is that this behavior is browser-related as the component is using the default tooltip without any additional configurations.

    An alternative I could suggest is using the IgxTooltip component instead of the default one. Also, in case you would like to apply custom styling, I believe you will find the IgxTooltip Styling section here quite helpful on this matter.

    Please let me know if you need any further assistance regarding this matter.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Associate Software Developer

  • 620
    Offline posted

    In addition to my initial reply, setting the IgxTooltip on each cell in multiple columns could be achieved easily by defining a cell template using the igxCell directive and adding the tooltip configurations inside the template. Then, in order to apply this template to each cell in all columns, I would suggest using the IgxGrid’s columnInit event and setting the bodyTemplate property to the custom template.

    This could look similar to the following:

    <!-- component.html -->
    <igx-grid
        [data]="data"
        [primaryKey]="'ID'"
        (columnInit)="columnInit($event)"
    >
        <igx-column [field]="'ID'"></igx-column>
        ...
    </igx-grid>
    
    <!-- Cell template with IgxTooltip -->
    <ng-template #cellTemplate igxCell let-cell="cell">
        <div #tooltipRef="tooltip" igxTooltip>
            {{ cell.value }}
        </div>
    
        <div [igxTooltipTarget]="tooltipRef">
            {{ cell.value }}
        </div>
    </ng-template>

    // component.ts
    @ViewChild('cellTemplate', { static: true })
    public cellTemplate!: TemplateRef<any>;
    
    public columnInit(column: IgxColumnComponent) {
        column.bodyTemplate = this.cellTemplate;
    }

    Here could be found a small sample for your reference.

    However, in case you would like to continue using the default tooltip, I believe you will find the following StackOverflow post here helpful.

    Please let me know if you need any further assistance regarding the IgxTooltip component.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Associate Software Developer