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

Position Tooltip

14 Answers 364 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Sitefinity
Top achievements
Rank 1
Sitefinity asked on 27 Aug 2012, 02:57 PM
I would like to position the tooltip on line graphs to be more directly above the plot point that to the right. Is this possible? How can I accomplish this?

14 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 28 Aug 2012, 02:51 PM
Hello Juan,

I am afraid the described functionality is currently not supported in Kendo UI DataViz and there is no suitable workaround I can suggest to achieve it. The implementation of such functionality has been discussed and we will consider its implementation for future versions of the product. 

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
Mark
Top achievements
Rank 1
answered on 19 Apr 2013, 11:03 AM
Same Problems,I  would like to position the tooltip on line graphs to be more directly above the plot point that to the right. Is this possible? How can I accomplish this?
0
Iliana Nikolova
Telerik team
answered on 19 Apr 2013, 01:54 PM
Hello Mark,

In order to achieve this you can set negative left margin to the .k-tooltip element. For example: 
<style>
.k-tooltip{
    margin-left: -50px;
}
</style>

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
Wai Hoe
Top achievements
Rank 1
answered on 23 Jun 2014, 06:15 AM
Hi, I have a bar chart, I set the margin-left as mentioned in previous post. I looks fine when the browser is in full screen mode, but when resize the browser to different size, the tooltip position no longer display nicely, either too much on the left or right, is there a solution for this matter?
0
Iliana Nikolova
Telerik team
answered on 25 Jun 2014, 04:16 PM
Hi Wai,

There is no a universal solution for this case. As a possible workaround I would suggest to set the tooltip margin depending on the window size. As an example: 
if($(window).width()< 500){
    $(".k-tooltip").css("margin-left", "-20px");
}

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jean-François
Top achievements
Rank 1
answered on 25 Aug 2014, 07:55 PM
In case anyone else is looking, here is the uservoice entry to vote for this issue : http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/2981443-tooltips-get-clipped

Please include this feature, it's rather easy and it's a stupid little feature, yet a deal breaker for our client... quite annoying.
0
Colin
Top achievements
Rank 1
answered on 11 Feb 2016, 02:50 PM
Not sure if this has yet to be added. Will keep searching. But we're hoping we could force the tooltip to always position itself at the top of the chart, rather than following the mouse around.
0
Iliana Nikolova
Telerik team
answered on 16 Feb 2016, 12:28 PM
Hi Colin,

Although it is not supported out-of-the-box, you could position the tooltip at the top of the chart by using additional CSS. Take a look at this dojo and let me know if it will fit the current requirements.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Colin
Top achievements
Rank 1
answered on 16 Feb 2016, 05:27 PM
Thanks Iliana. That makes a lot of sense. Getting the popup to be centered might be a challenge. I'll play around with it. You got me going in the right direction. Thanks!
0
Colin
Top achievements
Rank 1
answered on 19 Feb 2016, 03:56 PM

Follow up question. Iliana, your point would work perfectly if we could render that tooltip within the chart. But it seems to render/create itself on the body by default, not allowing us to use the relative positioning If you add a bunch of text to the top of your example you'll see what I mean. Is it possible to to give the tooltip a parent class/id for where to create the tooltip? If so we'd be able to use what you supplied and position the tooltip easily within the chart area. Thanks!

0
Colin
Top achievements
Rank 1
answered on 19 Feb 2016, 04:20 PM
It looks like I might be able to achieve the positioning I want by using the series hover event and building out my own tooltip. But then it appears that I lose my left/right positioning.
0
Iliana Nikolova
Telerik team
answered on 24 Feb 2016, 02:54 PM
Hi Colin,

By design, the tooltip is rendered directly in the body and this cannot be changed. However, you could use the seriesHover and display the tooltip with a custom position (dojo).

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dragos
Top achievements
Rank 1
answered on 10 Mar 2017, 11:43 AM
Hello @Iliana, can you provide an example with shared tooltips using the same dojo as above with seriesHover ? 

http://dojo.telerik.com/uWoPaF/2
0
Iliana Nikolova
Telerik team
answered on 14 Mar 2017, 11:23 AM
Hi Dragos,

You could use the same approach when shared tooltip is used (updated example). Keep in mind that you could get all points in the same category via the categoryPoints from the event data: 

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-seriesHover


Regards,
Iliana Nikolova
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
Charts
Asked by
Sitefinity
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Mark
Top achievements
Rank 1
Wai Hoe
Top achievements
Rank 1
Jean-François
Top achievements
Rank 1
Colin
Top achievements
Rank 1
Dragos
Top achievements
Rank 1
Share this question
or