Tooltip ClipMode - We want custom header tooltip but also grid tooltip

[Daniel Jennings]

Greetings!!  

I am trying to remove the ClipMode tooltip from the header column of our grid.  We have some very narrow columns and are getting a dueling tooltip:

I understand that ClipMode is a column level setting.  We have the custom header tooltip being added properly.  

Not setting the ClipMode of the grid turns off the duplicate header tooltip but also turns off the tooltips in the grid which we still want.  

Is there a method of hiding the clipmode generated header tooltip or adjusting the limit on when the clipmode tooltip appears??   

Thank you,

-Daniel

[Kishore Muthukrishnan]

Hi Daniel,

Greetings from Syncfusion support,

When both a custom tooltip is applied to a header cell and clipMode is enabled for a column, multiple tooltips can appear in the header. To resolve this, we recommend using a custom tooltip for the entire column's data. You can add a custom attribute to the column and configure the tooltip content dynamically using the beforeRender event. Please refer to the below code snippet and sample for more information.

[app.component.html]

 

<ejs-tooltip #tooltip target=".custom-tooltip" (beforeRender)="beforeRender($event)">

    <ejs-grid

      [dataSource]="data"

      allowPaging="true"

      [pageSettings]="pageSettings"

      [allowSorting]="true"

      [allowFiltering]="true"

      [filterSettings]="filterSettings"

      [editSettings]="editSettings"

      [toolbar]="toolbar"

    >

      <e-columns>

        <e-column

          field="CustomerName"

          headerText="Customer Name"

          width="150"

          [validationRules]="customeridrules"

          [customAttributes]="{class: 'custom-tooltip'}"

        ></e-column>

                  . . . . . .

       </e-columns>

    </ejs-grid>

  </ejs-tooltip>

 

[app.component.ts]

 

beforeRender(args): void {

      if (args.target.classList.contains('custom-tooltip')) {

          (this.tooltip as TooltipComponent).content = args.target.innerText;

      }

      if (args.target.classList.contains('custom-tooltip') && args.target.closest('.e-headercell')){

        (this.tooltip as TooltipComponent).content = 'Custom Content';

      }

  }

 

Sample : https://stackblitz.com/edit/angular-perhsw?file=src%2Fapp.component.html,src%2Fapp.component.ts

If you need further assistance, feel free to let us know!

Regards,

Kishore Muthukrishnan

[Daniel Jennings]

Thank you for the reply!!  

The proposed solution looks promising.

Is there a known issue that may cause beforeRender to not fire??

{

                    field: 'S',

                    headerText: 'S',

                    headerTooltip: 'Subjects',

                    width: 40,

                    type: 'number',

                    customAttributes: this.customAttributeForTooltip,

                    // clipMode: 'EllipsisWithTooltip'

                // format: 'yMd',

                // textAlign: 'Right'

                },

                {

                    field: 'A',

                    headerText: 'A',

                    headerTooltip: 'Apprehensions',

                    width: 40,

                    type: 'number',

                    customAttributes: this.customAttributeForTooltip,

                // format: 'yMd',

                // textAlign: 'Right'

                },

One example, we have 2 adjacent columns, S works fine firing beforeRender and A never fires beforeRender.   Debug at onBeforeRender responds to mouse over on S but not on A.

We have several columns not firing beforeRender.  

Thank you,

-Daniel 

[Rajapandi Ravi]

Daniel,

In the provided sample shared in our previous update, the tooltip's target is set to custom-tooltip, and the same custom-tooltip class is applied to the CustomerName column using the customAttributes property. This ensures that the tooltip is displayed exclusively for the CustomerName column.

If you want to display the tooltip for the S and A columns, make sure the tooltip target class name and the class name specified in the customAttributes property are identical. This will resolve the issue on your end.

For your convenience, we have modified the example to set the tooltip target class name and the customAttributes property class name to the same value, allowing the tooltip to appear for all columns as expected. Please refer to the following code example and sample for more details.

App.component.html

 

<ejs-tooltip #tooltip target=".custom-tooltip" (beforeRender)="beforeRender($event)">

    <ejs-grid

      [dataSource]="data"

      allowPaging="true"

      [pageSettings]="pageSettings"

      [allowSorting]="true"

      [allowFiltering]="true"

      [filterSettings]="filterSettings"

      [editSettings]="editSettings"

      [toolbar]="toolbar"

    >

      <e-columns>

        <e-column

          field="OrderID"

          headerText="Order ID"

          [customAttributes]="{class: 'custom-tooltip'}"

        ></e-column>

        <e-column

          field="CustomerName"

          headerText="Customer Name"

          [customAttributes]="{class: 'custom-tooltip'}"

        ></e-column>

        <e-column

          field="OrderDate"

          headerText="Order Date"

          [customAttributes]="{class: 'custom-tooltip'}"

        ></e-column>

        <e-column

          field="Freight"

          headerText="Freight"

          [customAttributes]="{class: 'custom-tooltip'}"

        ></e-column>

        <e-column

          field="ShippedDate"

          headerText="Shipped Date"

          [customAttributes]="{class: 'custom-tooltip'}"

        ></e-column>

        <e-column

          field="ShipCountry"

          headerText="Ship Country"

          [customAttributes]="{class: 'custom-tooltip'}"

        ></e-column>

      </e-columns>

    </ejs-grid>

  </ejs-tooltip>

 

Sample: https://stackblitz.com/edit/angular-perhsw-6of9fxch?file=src%2Fapp.component.html,src%2Fapp.component.ts

If still you face the issue, please share the below details

1)         Share your complete Grid rendering code, we would like to check how you are implementing our suggested solution at your end.

2)         Share your exact requirement with detailed description and also could you please confirm you would like to display only for specific columns or all columns?

3)         Share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful for us to validate and provide better solution.

[Daniel Jennings]

Thank you for the responses!!  This solution resolved our issue.  

[Vikram Sundararajan]

Hi Daniel Jennings,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards,

Vikram S