Tooltip Template background not wide enough

[Robert]

Pie chart with a tooltip that uses a template.  The tooltip has a backgound color that is not wide enough to cover all the text in the label.  See attached image.

It doesn't appear there is a width property that I could increase.  Suggestions?

.Tooltip(tooltip => tooltip.Visible(true).Template("#= category # : #= kendo.format('{0:p}', dataItem.value)#"))

[Tsvetomir]

Hi Robert,

By default, the tooltip of the Kendo UI Chart expands until all of the content is shown. Therefore, there should be external logic which modifies the width of the tooltip. 

In terms of modifying the visual appearance of the tooltip, it could be done via the following CSS rule:

<style>
  .k-tooltip{
    width: 200px;
  }
</style>

In case the issue is still present is it possible for you to isolate the faulty behavior in a sample project and send it back to me?

Looking forward to your reply.


Best regards,
Tsvetomir
Progress Telerik

[Robert]

This should reproduce the issue.

Class

public class AllocationChartItem
       {
           public int ID { get; set; }
           public string category { get; set; }
           public decimal value { get; set; }
           public string GroupName { get; set; }
           public string color { get; set; }
       }

Chart

@(Html.Kendo().Chart<AllocationChartItem>()
            .Name("chartAllocations")
            .ChartArea(chartArea => chartArea
                .Background("transparent"))
            .Title(title => title
                .Text("Allocations")
                .Position(ChartTitlePosition.Top)
            )
            .Legend(legend => legend
                .Visible(false)
            )
            .SeriesDefaults(series =>
                series.Donut().StartAngle(150)
            )
            .DataSource(dataSource => dataSource
                .Group(group => group.Add(item => item.GroupName))
                            .Read(read => read.Action("AllocationPieChartData", "Account").Data("sendId"))
            )
            .Series(series =>
            {
                series.Donut("value", "category")
                        .Name("Allocations");
            })
            .Tooltip(tooltip => tooltip.Visible(true).Template("#= category # : #= kendo.format('{0:p}', dataItem.value)#"))

)

Data for Chart

[
{
ID: 0,
category: "No Class",
value: 1,
GroupName: "Class",
color: "#79f747"
},
{
ID: 80873,
category: "Dorsey Wright SRS International",
value: 0.6,
GroupName: "Product",
color: "#5AB935"
},
{
ID: 2848,
category: "CLS Protected Equities",
value: 0.4,
GroupName: "Product",
color: "#438A27"
}
]

 

[Robert]

If I use your styling it will fix the one outlier with the long name but then every tooltip is really wide.  Ideally it should resize depending on the length of the text, or pick the longest item and size to that.

[Tsvetomir]

Hi Robert,

I have created a sample project with the provided code snippets. However, it appears that the tooltip's background is automatically adjusted according to the content. Here is a short video demonstration:

https://screencast-o-matic.com/watch/cqQb6qtKlc

Can you ensure that there is no external CSS which might be interfering with the widths of the tooltip? 

I am attaching the sample project to my response. Is it possible for you to modify it in order to replicate the faulty behavior and send it back to me?

Looking forward to your reply.


Best regards,
Tsvetomir
Progress Telerik