TooltipsAppearance ClientTemplate is inheriting Series.Appearance.FillStyle.BackgroundColor

1 Answer 20 Views
Chart (HTML5)
Top achievements
Rank 1
Chris asked on 30 Apr 2021, 02:37 AM


I'm using TooltipsAppearance.ClientTemplate. It's working fine but it's inheriting the standard tooltip appearance and my template appears inside it.

Please refer to the attached image.

An example of what the tooltip should look like is also in the image. You will also notice the text in the bottom half of the tooltip is not showing. It is actually there but the text color is white so you can't see it. 

What am I doing wrong?


1 Answer, 1 is accepted

Sort by
Peter Milchev
Telerik team
answered on 04 May 2021, 11:41 AM

Hello Chris,

The font color and background color can be controlled via the TooltipsApperance properties:

<TooltipsAppearance Color="Green" BackgroundColor="YellowGreen">
        <div style="border:1px solid red; height: 800px">
                #=dataItem.ProductName#<br />#=dataItem.Manufacturer#
Regarding the "border"-like coloring, this is the Tooltip's padding and you can remove it with the following style:

.k-tooltip.k-chart-tooltip {
    padding: 0;
    /* padding: 4px 8px;*/

If the issues persist, you can edit your post and include more details on the exact ClientTemplate you have and the HTML of the desired Tooltip content. Then, I would be able to edit my suggestion to address the new details.

Peter Milchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Chart (HTML5)
Asked by
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question