Position Tooltip

[Sitefinity]

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?

[Iliana Dyankova]

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

[Mark]

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?

[Iliana Dyankova]

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

[Wai Hoe]

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?

[Iliana Dyankova]

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

 

 

[Jean-François]

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.

[Colin]

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.

[Iliana Dyankova]

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

 

 

[Colin]

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!

[Colin]

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!

[Colin]

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.

[Iliana Dyankova]

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

 

 

[Dragos]

Hello @Iliana, can you provide an example with shared tooltips using the same dojo as above with seriesHover ? 

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

[Iliana Dyankova]

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