How to prevent a Kendo pie chart tip from drawing outside the parent div?

Question

I am using the Telerik Kendo UI pie chart. I use the following configuration for a tooltip:

tooltip: { visible: true, template: "${ category } - ${ value }%" }, 

My category names are truncated because Tooltip shortcuts are too large. Is there a way to change the location where the tooltip is displayed?

Answer 1

You can try playing with overlay or the tooltip has an overlay property

 overlay: { gradient: "none" } 

Answer 2

I'm not sure about moving the tooltip how you would need to do this for everyone, and it might not seem very healthy. How about wrapping text in a tooltip? You can do this by specifying normal white space in your template. The parent of the tooltip template forces it on a single line, so you need to override this.

Check out this fiddle and see if it brings you closer to something that works for you.

http://jsfiddle.net/burkeholland/JZrAt/

Answer 3

Alternatively, if you do not want the word wrap proposed in Burke to answer

.k-tooltip { width: auto } worked for me.