Conditional show a tooltip

6 posts, 0 answers
  1. Ron
    Ron avatar
    57 posts
    Member since:
    Oct 2010

    Posted 21 Dec 2016 Link to this post

    Is there a way to conditionally show a tooltip? I want to be able to prevent showing the tooltip based on some arbitrary javascripting. I've tried to mess with the show event (return false / ev.preventDefault() / etc), but that doesnt seem to work. I've found a rather funky solution to this question on http://stackoverflow.com/questions/23297623/kendo-ui-conditionally-preventing-a-tooltip-from-being-displayed-on-a-grid-cell where a 'beforeShow' event is added to the tooltip show function. Any other options that I might have missed?

    Regards,
    Ron

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    426 posts

    Posted 23 Dec 2016 Link to this post

    Hello Ron,

    You can check out the following how-to article from our documentation:

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

    The example demonstrates how to use the show and hide event handlers to display the Tooltip conditionally, based on the length of the content.

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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. Ron
    Ron avatar
    57 posts
    Member since:
    Oct 2010

    Posted 02 Jan in reply to Dimiter Topalov Link to this post

    Your example does seem to work nicely, but I still have a problem with this solution.In your example the following style is added:

     <style>
          .k-tooltip.k-popup{
            visibility: hidden;
          }
    </style>

    This style applies to ALL tooltips. How do I make this solution apply to only tooltips for certain components? Something like this doesnt work unfortunately where the selector ".my-class" refers to a div that contains all elements that should have a conditional tooltip:

     <style>
          .my-class .k-tooltip.k-popup{
            visibility: hidden;
          }
    </style>

    Regards,
    Ron

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    426 posts

    Posted 03 Jan Link to this post

    Hi Ron,

    A possible approach in this scenario is not to use CSS, but to create different tooltips for the different Grids/parts of the page, and use the show/hide events only of the ones that need conditional hiding, e.g.:

    http://dojo.telerik.com/eniDu

    The first Grid has conditional tooltip showing/hiding logic, while in the second one, a tooltip is shown for all records in the left column.

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  5. Ron
    Ron avatar
    57 posts
    Member since:
    Oct 2010

    Posted 03 Jan Link to this post

    This works to a certain extent. The first time the tooltip's show function is called, the tooltip element is not set to be invisible. If the first cell you hover over should show the tooltip (text length <= 40), then the tooltip is still briefly shown and hidden immediately. This is caused by the fact that the show function is called after animation. Just try hovering over the first row of the first grid in your example and you'll the problem.
  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    426 posts

    Posted 05 Jan Link to this post

    Hello Ron,

    You are correct. The tooltip can be initially hidden via CSS like in the first example from the how-to article, and then each separate Tooltip widget can control whether it will be shown conditionally or unconditionally in its own show event handler:

    http://dojo.telerik.com/eniDu/2

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
Back to Top