I use an in-line editing Grid. On one column I have defined a tooltip like so:
*Template to define the tooltip and it's anchor, the reference to the directive in the grid and the template associated to it as well as the mouseover event that calls the tooltip.
*This ios the column where the tooltip needs to be displayed
*This is the showTooltip method that allows the correct cells to trigger the display of the tooltip template on its anchor.
This works when the cell contains a value, however the cell is empty by default and since it's empty there is no style attribute to the cell until it contains a value so the tooltip is never displayed when the cell is empty.
I've tried applying an id to the column, to wrap it in a div with an id but they are always empty. I cannot target the cell using something other than the classList which is null when the cell is empty.
How can I identify the correct cell despite being empty to show the tooltip?
How can I have custom text for different cells?
Why is it so complicated to just implement a simple tooltip? Wouldn't be easy if there were a tooltip directive built-in to the grid i.e. [tooltiptext]="''Simple Tooltip"
Please refrain from using jQuery I am unfamiliar with its syntax and am using the Angular version of Kendo.
**This project is on Angular 17.2 and uses the Kendo 15.1 Libraries. I am aware there is a new version but it breaks all our theme variables.
1 Answer, 1 is accepted
Hi Luc,
Thank you for the details provided.
Based on the shared information, I am not quite sure why the Tooltip is not displayed when hovering over empty cells in the Grid component given the configuration seen in the code snippets. In general, the defined class for the Grid cells is expected to be applied to all cells regardless of them being empty or not, and thus the logic that identifies the particular cells containing this class should work as expected.
In this line of thought, I can see that the logic for showing a Tooltip checks the classList of the `element.parentElement.parentElement`. However, if the logic on your side is implemented following the suggested approach from our relevant documentation article (it looks like the same approach is followed), it should be enough to directly verify the classList of the target element itself, i.e.:
public showTooltip(e: MouseEvent): void {
const element = e.target as HTMLElement;
if (element.classList.contains('vmReqColumn')) {
this.tooltipDir.toggle(element);
} else {
this.tooltipDir.hide();
}
}Furthermore, to display custom text in the Tooltip depending on the particular cell that is hovered, the developer can specify the desired text in the implemented template for the Tooltip content. For example, the innerText of the anchor element can be obtained, which will show the text content contained in the element of the hovered Grid cell. Here is a sample logic that uses a method for returning the corresponding text content of the Grid cells if such exists and otherwise returns an "Empty cell" string (which will show for empty cells with no content):
<ng-template #template let-anchor>
<span>{{ tooltipText(anchor.nativeElement.innerText) }}</span>
</ng-template>public tooltipText(text: string): string{
if (!text) {
return "Empty cell";
} else {
return text;
}
}For demonstration, I am linking below a StackBlitz example that implements a similar scenario, in which a Tooltip is displayed for the Grid cells of a particular column despite them being empty or not:
With the above being said, can you please check out the above example and clarify if I am missing any key point in the reproduction of the experienced behavior on your side as explained in your reply? For instance, can you elaborate on what is meant by empty cells, do they have an empty content or is the use case different?
Ideally, it would be great if you could modify the StackBlitz example in a way that the described behavior in your project is replicated and send it back to me for further troubleshooting. This will allow me to actually observe the issue on my side and will help me provide more valuable suggestions on the matter.
Please observe the provided information and let me know how it goes.
Regards,
Zornitsa
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Your stackblitz helped me thank you.
There is no other element than k-list in the classList on the base element:
I HAVE to go to 2 parent levels to find the style I need in the classList attribute:
Your example does NOT use the classlist to control the tooltip. It simply uses the innetText attribute of the element which DOES work but in my case the class vmReqColumn is NEVER present when the cell is empty, either on the base element or its parents. It just simply isn't drawn by your grid.
Your solution works if I had only 1 column with a tooltip. That isn't the case.
I ended up using the class on the header instead of the cell because IT is always rendrered in the grid. This too is implemented in a weird way. When I mouse into the column header the tooltip is displayed correctly however this only occurs if the mouse is not on the column's text. As soon as you move into the column's name the tooltip disappears. EX:
Tooltip only works when the mouse is not in the red area:
Is there a way to correct this behavior?
Hi Luc,
Thank you for the further details provided.
Tooltip logic in StackBlitz example
In the StackBlitz example I had previously shared, the Tooltip is displayed upon hovering column-specific Grid cells based on the condition of whether the classList of the current target HTML element contains the particular custom class ('vmReqColumn') set through the respective class property of the Grid column. This is achieved in the implemented logic for the showTooltip() method that is defined as a handler for the mouseover event of the Grid:
public showTooltip(e: MouseEvent): void {
const element = e.target as HTMLElement;
if (element.classList.contains('vmReqColumn')) {
this.tooltipDir.toggle(element);
} else {
this.tooltipDir.hide();
}
}If the condition that checks the classList in the above code snippet is removed from the example, the Tooltip will not be displayed for any of the Grid cells, which confirms that the classList condition does control the Tooltip's appearance. The innerText attribute is only used for the custom template configured for the Tooltip's content, so each Tooltip instance will show the text of the hovered Grid cell.
Cell template with custom component
Nevertheless, I reviewed the information shared so far once again and noticed that the Grid column, which has a custom class set in the second code snippet from your initial reply has a cell template configured. Moreover, the cell template contains a custom Angular component (app-format-number-red), which I assume includes the cells' content for the corresponding Grid column.
On that note, it is important to mention that the class property of the ColumnComponent applies custom classes to the <td> elements of the Grid, which means that in case the separate component defined in the cell template contains additional HTML elements, their classList will not include the particular custom class set through the column's class property.
Therefore, this probably causes the need to check the parent elements of the event target since the class is actually applied to the <td> elements, which in the scenario with the cell template, would be parents of the internal elements in the custom component. This in turn will also cause the explained behavior in your last reply regarding the Tooltip being displayed only when hovering the part outside the cell's text.
Having said that, I am still not sure why the class is not applied to the empty cells in your scenario. It may also be related to the custom component in the cell template but this is just an assumption since I do not know the logic contained in this component.
Suggestions
If this is indeed the reason for the experienced issues (except not being sure about the empty cells one), the behavior can be overcome by checking if the corresponding class is contained in both the target (the internal element in the custom component) and its parent element (<td>). However, this will cause the Tooltip to have two separate anchors (the custom component and the associated <td> element), which will display two instances of the Tooltip for the same cell depending on which element is hovered.
To avoid having multiple Tooltip anchors and instances for one cell, some custom CSS can be used to make the custom component in the cell template take up the full size of its parent <td> element. For example:
.k-grid .k-grid-content td {
position: relative;
}
app-format-number-red {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 8px 12px;
}Here is also a StackBlitz example for demonstration, which implements a similar scenario to the one in the code snippets and has a custom component rendered in the cell template of a Grid column:
This example has the above CSS suggestion applied and it can be observed how the Tooltip is displayed as expected for all cells both when hovering over the contained text. The above example also has the same class for controlling the Tooltip applied to other columns as well to illustrate that it works properly for multiple Grid columns. In this case, the condition for showing the Tooltip checks the classList of both the target element and its parent due to the custom component implementation.
Please check out the provided information and StackBlitz example and let me know if I misunderstood the exact scenario. In case an issue still persists, please modify the shared example with the specifics of your scenario so that it reproduces the problematic behavior, and send it back to me for further observation.
I hope this helps.
Regards,
Zornitsa
Progress Telerik