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

Conditional show a tooltip

5 Answers 1539 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 21 Dec 2016, 11:56 AM

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

5 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 23 Dec 2016, 09:46 AM
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.
0
Ron
Top achievements
Rank 1
Veteran
answered on 02 Jan 2017, 04:46 PM

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

0
Dimiter Topalov
Telerik team
answered on 03 Jan 2017, 04:12 PM
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.
0
Ron
Top achievements
Rank 1
Veteran
answered on 03 Jan 2017, 04:31 PM
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.
0
Dimiter Topalov
Telerik team
answered on 05 Jan 2017, 11:52 AM
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.
Tags
ToolTip
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Dimiter Topalov
Telerik team
Ron
Top achievements
Rank 1
Veteran
Share this question
or