Chart Tooltip CSS

[Nick]

Is it possible to set the CSS properties of the tooltip div?  It would be nice to be able to set a max-width, z-index, etc.

[Iliana Dyankova]

Hello,

It is possible to customize the tooltip div using custom CSS. Regarding to background, color, border etc. you could use the tooltip configuration options.
For example:

//Initialize the Kendo UI Chart

$("#chart").kendoChart({

    ...

    tooltip: {

        visible: true,

        background: "red",

        format: "{0}%"

    }

});

 

 

    //Custom CSS

    #chart div

    {

       z-index: 100;

    }

 Regards,
Iliana Nikolova
the Telerik team

[Nick]

Thank you!

[Alex]

The tooltip background is semitransparent, no matter what color I set.
Is it possible to make it opaque?

[Dimo]

Hello Alex,

Surely it is possible. You can override the tooltip styling like this:

.k-chart .k-tooltip
{
    opacity: 1 !important;
}

Greetings,
Dimo
the Telerik team

[Yeyuan]

Hey Dimo,

Could we set this style just to one chart?

I have two charts that one will be on top of the other on a mobile screen, and I want the tooltip for the top one to have a higher z-index and the one below to have a lower z-index. 

How to achieve this? 

Please see the attached picture. Right now the tooltip that is supposed to be on the top and the tooltip that is supposed to be at the bottom share the same class .k-tooltip .k-chart-tooltip and they don't have different class names or id names or parent id names associated.  What would you suggest me to do here? Anything I can do with the kendo razor template below like adding a class or an id there?

.Tooltip(tooltip => tooltip
    .Visible(true)
)

 

Thanks very much!

[Yeyuan]

Hey Dimo, 

Following my previous post, I would like you to know that the reason one chart is one top of the other one is that it's inside of a kendo window that pops up. Somehow the tooltip of the top chart wouldn't know it's from a kendo window and it can't be associated with that kendo window id or chart id.

Let me know if there are some workaround for this.

 

Thanks!!

[Preslav]

Hello Yeyuan,

A possible solution to achieve the desired outcome is to use a template for the tooltip. In the template, wrap the content in an HTML element with a unique class. After that, handle only the first seriesHover event with the jQuery one method. In the event handler, in a timeout, set the desired z-index to the parent of the template wrapper.

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/tooltip#tooltip.template
• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/serieshover
• https://api.jquery.com/one/
• https://api.jquery.com/parent/
• https://api.jquery.com/css/

For a runnable example, check this test JavaScript Dojo:

• http://dojo.telerik.com/uCAkIwAM/2

I hope this helps.


Regards,
Preslav
Progress Telerik

[Preslav]

H again,

About the question in the second post, the tooltip is not associated with its "parent" because it must be on the root level of the Body element of the page. This is needed for the cases where the tooltip overflows to sizes of the widget that invoked it. In some scenarios, if it is not on the root level of the Body, the tooltip might shrink. 


Regards,
Preslav
Progress Telerik