This is a migrated thread and some comments may be shown as answers.

Show tooltips only for grid headers and cells that have ellipsis

4 Answers 722 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
NovaStor
Top achievements
Rank 1
NovaStor asked on 07 Aug 2017, 10:08 PM

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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 09 Aug 2017, 01:28 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
NovaStor
Top achievements
Rank 1
answered on 09 Aug 2017, 08:05 PM

Perfect!

Thank you! :)

0
Steve
Top achievements
Rank 1
Veteran
answered on 28 Apr 2020, 02:20 PM

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()) {

 

0
Dimitar
Telerik team
answered on 30 Apr 2020, 05:45 AM

Hi,

Thank you for sharing this suggestion with the community.

Regards,
Dimitar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
ToolTip
Asked by
NovaStor
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
NovaStor
Top achievements
Rank 1
Steve
Top achievements
Rank 1
Veteran
Share this question
or