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

Please see the sample

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. 

No Data
  • 540
    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-column [field]="'ID'"></igx-column>
    <!-- Cell template with IgxTooltip -->
    <ng-template #cellTemplate igxCell let-cell="cell">
        <div #tooltipRef="tooltip" igxTooltip>
            {{ cell.value }}
        <div [igxTooltipTarget]="tooltipRef">
            {{ cell.value }}

    // 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.

    Riva Ivanova
    Associate Software Developer

No Data