This is a migrated thread and some comments may be shown as answers.

Chart Tooltip CSS

8 Answers 223 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 06 Mar 2012, 07:47 PM
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.

8 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 07 Mar 2012, 10:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nick
Top achievements
Rank 1
answered on 09 Mar 2012, 05:52 PM
Thank you!
0
Alex
Top achievements
Rank 1
answered on 28 Dec 2012, 12:02 AM
The tooltip background is semitransparent, no matter what color I set.
Is it possible to make it opaque?
0
Dimo
Telerik team
answered on 28 Dec 2012, 02:48 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Yeyuan
Top achievements
Rank 1
answered on 19 Dec 2018, 03:55 PM

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!

0
Yeyuan
Top achievements
Rank 1
answered on 19 Dec 2018, 04:01 PM

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!!

0
Preslav
Telerik team
answered on 24 Dec 2018, 09:08 AM
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.
For a runnable example, check this test JavaScript Dojo:
I hope this helps.


Regards,
Preslav
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Preslav
Telerik team
answered on 24 Dec 2018, 09:12 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Charts
Asked by
Nick
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Nick
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Dimo
Telerik team
Yeyuan
Top achievements
Rank 1
Preslav
Telerik team
Share this question
or