Conditional show a tooltip

[Ron]

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

[Dimiter Topalov]

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

[Ron]

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

[Dimiter Topalov]

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

[Ron]

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.

[Dimiter Topalov]

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