Show tooltips only for grid headers and cells that have ellipsis

[NovaStor]

Hi.

I'm having issues trying to display tooltips only for grid headers and cells that have ellipsis using the logic indicated here:

http://docs.telerik.com/kendo-ui/controls/layout/tooltip/how-to/show-on-ellipsis

 

Here is an example:

http://dojo.telerik.com/OjUJI

 

The issues I'm experiencing:

 

1. When hovering over an element for the first time, an empty tooltip is displayed.

For example, hover over the OrderID column header right after clicking on the "Run" button. If you move the mouse out of the column header than back, no tooltip is displayed. I didn't expect an empty tooltip to be displayed for this element at all, even during the first mouse over.

 

2. Grid headers with ellipsis don't display a tooltip.

For example, hover over any of the last three columns.

I expected a tooltip to be displayed.

 

3. Not all grid cells with an ellipsis display a tooltip.

For example, hover over the cells with a "Ship Name" containing any of the following values:

a. Vins et alcools Cheva...

b. Victua... en stock

 

Thank you.

[Dimitar]

Hi,

Thank you for providing resources for the approach followed and a reproduction Dojo snippet.

The first issue is due to a missing style, which is present in the How To article and not present in the Dojo snippet with grid:

<style>
  [role="tooltip"]{
    visibility: hidden;
  }
</style>

As the show event is triggered when the tooltip is shown, we are using CSS to show it, if the text content is other than "". But we need to make the tooltip hidden initially using the rule above and then show it on show event. Otherwise, it appears empty initially. After the initial empty showing, there is no such issue, because we set visibility hidden on handling the hide event.

As far as the second issue is concerned, it seems caused by having sorting: true applied to the Grid, which additionally changes the results returned for element.offsetWidth and element.scrollWidth. The third issue is reproducible on my side in IE, but not in Chrome.

Having in mind issues 2 and 3, they are connected with the complexity of determining if an element has ellipsis applied or not. There are numerous solutions in forums, dealing with this matter. The one solution, which is used in or tooltip sample, is not a silver bullet for all complex scenarios possible. I have prepared a Dojo snippet for you, following the approach given in this StackOverflow thread. This approach shows tooltip even for cells with text on multiple lines (which is noted as a drawback in the forum thread), but it is the most reliable cross browser approach to determine if a tooltip is needed or not for Grid headers and cells.

Regards,
Dimitar
Progress Telerik

[NovaStor]

Perfect!

Thank you! :)

[Steve]

I was looking for how to display tooltips for column headers that have ellipsis and this does work, except for some headers which are close to the width of the text without ellipsis. The problem is the width check does not take into account the padding on left and right of 7.8. In the dojo, the check needs to be

if (($c.width() + 15.6) > $element.width()) {

 

[Dimitar]

Hi,

Thank you for sharing this suggestion with the community.

Regards,
Dimitar
Progress Telerik