How can I change to look of tooltips?

[Sumith Jayasuriya]

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

[Terence]

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.

[Iliana Dyankova]

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

[Masaab]

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
}

[Iliana Dyankova]

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

 

 

[Chivas]

Hi, use template:"<span class='yourtooltipname'>"+.....+"</span>"

in your style,

.tooltip .yourtooltipname{

color:"#000000";

}

plz try

[Veselin Tsvetanov]

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