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

tooltip for use with grid cell?

11 Answers 1424 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tim R
Top achievements
Rank 1
Tim R asked on 15 Jan 2013, 06:01 PM
Does Kendo have a Tooltip plug-in that can be invoked from the grid cell, perhaps opening when the mouse has been in the cell for a specified duration, e.g. 750ms, and then closing when the mouse leaves the cell?


11 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 16 Jan 2013, 04:55 PM
Hello Tim,

I am afraid at present a Tooltip plugin is not available in Kendo UI suite, however the good news is that the implementation of Tooltip widget is scheduled for Kendo UI Q1 2013 official release (check the official roadmap).

Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim R
Top achievements
Rank 1
answered on 16 Jan 2013, 05:28 PM
Thank you for the news, Iliana.
0
Alex
Top achievements
Rank 1
answered on 25 Mar 2013, 07:07 PM
Hi Iliana,

I see that the new Kendo has tooltip feature. Can you show me how to create tooltip when user hover a cell inside a grid. See original question from Tim.

I have a similar issue as of Tim. For example, I  have a grid with 2 columns: Id (string) and Detail (long string). Since Detail data is long, I will hide this column. However, when user is hovering over the Id cell, I would like to show a tooltip that displays the detail of that ID. (My data is dynamic loaded from an API.)

Thank you,
Alex Nguyen

0
Iliana Dyankova
Telerik team
answered on 27 Mar 2013, 02:59 PM
Hello Alex,

I prepared for you a simple jsBin example which demonstrates how you can achieve the desired result using Kendo UI Tooltip widget. Please pay attention to the content and filter configuration options of the tooltip.
 
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 1
answered on 27 Mar 2013, 03:14 PM
Hi Iliana,

Thank you very much for the sample. 

One more question...

Currently, the filter is "td" so the tooltip is applied to all cells. What if we just want to have tooltip for certain columns only.
For example, in your sample, if we include OrderDate and ShipCity so we have 3 columns grid (including the OrderID). However, we just want tooltip for the OrderID only. When users hover over the OrderDate and ShipCity, there should be no tooltip.

Thank you very much,
Alex
0
Iliana Dyankova
Telerik team
answered on 29 Mar 2013, 02:00 PM
Hi Alex,

In order to achieve this you can set an attribute for the OrderID column and filter by it. For your convenience I modified the jsBin example

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 1
answered on 02 Apr 2013, 10:01 PM
Iliana 

Thank you very much. That is what I need.
Another question:  How do we hide the tooltip for cells that do not have data (nullable cells)
In those case, the content of tooltips is empty. Can we hide the blank tooltip?

Thank  you
Alex
0
Iliana Dyankova
Telerik team
answered on 05 Apr 2013, 08:18 AM
Hello Alex,

Apologies for not getting back to you earlier.

In order to achieve this you can use tooltip's hide() / show() methods and hide / show it for particular conditions. Another option is to specify a selector for which the tooltip will be shown (take a look at this example).

On a side note, I recommend you checking this blog post which I believe will be helpful.
 
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 1
answered on 05 Apr 2013, 01:48 PM
Iliana,

Great!. 

Thank you very much for your help.
Alex
0
Wolfgang
Top achievements
Rank 1
answered on 04 Sep 2013, 11:59 AM
Hello @all,

I've got some problems with proper placement/sizing of tooltips on grid cells and hope for some help.

Some background:
 - I've got a grid view with 5 columns, all with different width
 - Inside each cell, there is a span or div containing a "tooltip" attribute.
 - Using a custom content function, I use the value of this tooltip attribute to be displayed as tooltip text

So far ,everything works fine. However, The resizing of a tooltip depending on the text length does not work properly (setting width to auto manually didn't help).
If there the tooltip contains some long words, the tooltip width is increased to fit the length of this word. If I move the mouse to the next cell with a long text but without long words, the tooltip width stays the same, but moving the mouse again to another cell causes the width to decrease again. A screenshot is attached.
A manual calculation of the width using the tooltip show function works, but in that case the tooltip is placed at strange positions on the screen sometimes and only for large tooltip texts (depends on the cell from which the mouse is moved to the cell containing the long tooltip).
Setting a fixed tooltip width works, but is not very elegant and looks a bit strange. 


Is this a known bug or are there any hints how to avoid this behaviour?
0
Dimo
Telerik team
answered on 06 Sep 2013, 06:51 AM
Hello Wolfgang,

If no width is specified for the ToolTip, it should automatically resize each time it is displayed, depending on its content. If this does not work correctly, please provide a demo, which exhibits such a behavior, as I am unable to recreate it:

http://jsfiddle.net/dimodi/PYTEv/

On a side note, you can use a tooltip template with a min-width and max-width styles applied. In this way the tooltip will automatically adjust, but only within some preferred widths.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Tim R
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Tim R
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Wolfgang
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or