How can I change to look of tooltips?
5 Answers 782 Views
Sumith Jayasuriya
Top achievements
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

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.
- by
Terence
Top achievements
Rank 1
on 27 Jun 2014, 08:07 PM

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 11 Apr 2013, 01:17 PM
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: 
.k-tooltip{
   background: red !important; //specify tooltip's color
   width: 300px; //specify tooltip's width
   height: 300px//specify tooltip's height
}

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
Masaab
Top achievements
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
}
0
Iliana Nikolova
Telerik team
answered on 01 Jul 2014, 04:26 PM
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
 
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
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
Veselin Tsvetanov
Telerik team
answered on 19 Feb 2019, 11:32 AM
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
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.
Asked by
Sumith Jayasuriya
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Masaab
Top achievements
Rank 1
Chivas
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or