Show tooltips only for grid headers and cells that have ellipsis

3 posts, 1 answers
  1. NovaStor
    NovaStor avatar
    4 posts
    Member since:
    May 2014

    Posted 07 Aug Link to this post

    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.

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    356 posts

    Posted 09 Aug Link to this post

    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.
  3. NovaStor
    NovaStor avatar
    4 posts
    Member since:
    May 2014

    Posted 09 Aug in reply to Dimitar Link to this post

    Perfect!

    Thank you! :)

Back to Top