Sumith Jayasuriya
Top achievements
Rank 1
Rank 1
Sumith Jayasuriya
asked on 10 Apr 2013, 03:14 PM
Was wondering how I can change the overall look of the tooltip.
I haven't seen any documentation on this or if this is even possible, but I would like to change the look of the tooltips and was not sure what classes the tooltips are inherited from or where to begin. Currently it seems the background colors are being inherited from my page background.
It seems currently the tooltip attributes are concrete and I would like to attempt to make one where the size of the tooltip is determined by content.
Can someone please point me in the right direction on how to change look and feel.
Thanks
I haven't seen any documentation on this or if this is even possible, but I would like to change the look of the tooltips and was not sure what classes the tooltips are inherited from or where to begin. Currently it seems the background colors are being inherited from my page background.
It seems currently the tooltip attributes are concrete and I would like to attempt to make one where the size of the tooltip is determined by content.
Can someone please point me in the right direction on how to change look and feel.
Thanks
5 Answers, 1 is accepted
0
Hi Sumith,
Generally speaking, you can customize the appearance of any particular widget in Kendo UI using custom CSS and the widget-specific class (take a look at this help article). Also you can use any browser inspector to see what HTML output and CSS rules are applied in a given situation. For example the following CSS can be used in order to change the background and metrics of the Kendo UI Tooltip:
the Telerik team
Generally speaking, you can customize the appearance of any particular widget in Kendo UI using custom CSS and the widget-specific class (take a look at this help article). Also you can use any browser inspector to see what HTML output and CSS rules are applied in a given situation. For example the following CSS can be used in order to change the background and metrics of the Kendo UI Tooltip:
.k-tooltip{ background: red !important; //specify tooltip's color width: 300px; //specify tooltip's width height: 300px; //specify tooltip's height}Regards,
Iliana Nikolovathe Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Masaab
Top achievements
Rank 1
Rank 1
answered on 10 Apr 2014, 02:57 AM
you can also try
.k-widget.k-tooltip{
background: red !important; //specify tooltip's color
width: 300px; //specify tooltip's width
height: 300px; //specify tooltip's height
}
.k-widget.k-tooltip{
background: red !important; //specify tooltip's color
width: 300px; //specify tooltip's width
height: 300px; //specify tooltip's height
}
0
Hello Terence,
Please find my comments below:
- k-widget.k-tooltip.k-slider-tooltip
This selector targets the slider tooltip element;
- .k-widget .k-tooltip.k-slider-tooltip
This selector targets .k-tooltip.k-slider-tooltip elements which have parent with .k-widget class.
In the rendered HTML you can observe that the tooltip is attached to the body element, not to .k-widget.
Regards,
Iliana Nikolova
Telerik
Please find my comments below:
- k-widget.k-tooltip.k-slider-tooltip
This selector targets the slider tooltip element;
- .k-widget .k-tooltip.k-slider-tooltip
This selector targets .k-tooltip.k-slider-tooltip elements which have parent with .k-widget class.
In the rendered HTML you can observe that the tooltip is attached to the body element, not to .k-widget.
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chivas
Top achievements
Rank 1
Rank 1
answered on 18 Feb 2019, 07:33 AM
Hi, use template:"<span class='yourtooltipname'>"+.....+"</span>"
in your style,
.tooltip .yourtooltipname{
color:"#000000";
}
plz try
0
Hi Chivas,
Yes, that is correct. Using a template for the Tooltip content would allow you to further customize the look and feel of the Tooltip. Here you could find a demo on that.
Regards,
Veselin Tsvetanov
Progress Telerik
Yes, that is correct. Using a template for the Tooltip content would allow you to further customize the look and feel of the Tooltip. Here you could find a demo on that.
Regards,
Veselin Tsvetanov
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.
Am having quite a difficult time styling the tooltips for sliders. I want to have two different styles for two different sliders.
Could you please explain for example, why I can apply apply styles with
.k-widget.k-tooltip.k-slider-tooltip {}
but not with
.k-widget .k-tooltip.k-slider-tooltip {}
With the only working specificity being .k-widget.k-tooltip.k-slider-tooltip, I cannot for example specify
#style1 .k-widget .k-tooltip.k-slider-tooltip {}
#style2 .k-widget .k-tooltip.k-slider-tooltip {}
Neither achieves anything with the widget wrapped in the relevent div. Have lost hours on this... ouch.