tooltipClass not working

[Randy]

Hi,

I'm using tooltip module (2.1.0) under Material theme. It works perfectly except the font is too small to see (guess it's 10px). So I'm trying to use tooltipClass with a customized style, following example in https://www.telerik.com/kendo-angular-ui/components/tooltip/how-to/customize-styling/. But strangely it doesn't work, the tooltip still showing the original styles. Other properties of the TooltipDirective works, such as showOn, tooltipHeight, etc. Not sure where I did wrong.

I also have Angular Material controls on the page, was suspecting there's confliction of the styles but removing those controls doesn't help. What might cause tooltipClass not work?

Attached is the screenshot of the tooltip even after applying tooltipClass.

If there's other approach can increase the font size rather than a customized style I'd love it.

Thanks,

Randy

[Dimiter Topalov]

Hi Randy,

Such issues are typically related to not setting the ViewEncapsulation of the host component to None:

https://angular.io/guide/component-styles#view-encapsulation

The two ways to overwrite built-in component styling are to either set ViewEncapsulation to None, or provide the custom CSS at a global level.

Here is the mentioned documentation demo where ViewEncapsulation is set to None, adjusted to use the Material theme as opposed to the Default one:

encapsulation: ViewEncapsulation.None,
  styles: [`
    .my-class * {
        font-size: 1.2em;
        color: yellow;
        background: blue;
    }

    .my-class .k-callout {
        background-color: transparent;
        color: blue;
    }

https://stackblitz.com/edit/angular-hcscwp?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Randy]

Hi Dimiter,

Actually I did tried ViewEncapsulation set to None before posting the thread, but without success. But today as per your suggestion I tried again and it works as expected. I did a npm package update all to latest version today, not sure if that related. Anyway it's working now. My final choice is keeping the style in global css file for better management.

I'm curious that, is this approach(overriding styling) specific to tooltip, as it's actually not "belongs to" a component but global(not sure if this is the right phrase), or applies to other components as well?

Thank you for the resolution.

Thanks,

Randy

[Dimiter Topalov]

Hi Randy,

The global styles will affect all elements across inner components that match the provided selector, and the selector has enough specificity to overwrite other globally provided component styling (if such exists) that targets the same elements.

To scope the custom CSS to Tooltips only (for example), you can add the k-tooltip-wrapper class to the selector so that other elements with "my-class" style are not affected, e.g.:

https://stackblitz.com/edit/angular-tzrjt6-byupb6?file=styles.css // other elements are affected

https://stackblitz.com/edit/angular-tzrjt6-zptg3t?file=styles.css // other elements are not affected

The approach for overwriting Kendo UI for Angular built-in styling is applicable to all components - a CSS selector with enough specificity provided on a global level and after the Kendo theme is loaded will overwrite default component styling coming from the theme.

Regards,
Dimiter Topalov
Progress Telerik

[Randy]

Hi Dimiter,

Thank you for the examples, it helps a lot.

I also noticed another scene using Grid component that the loading indicator doesn't displaying Indigo color (as it should in Material theme) but only grey. And the spinning line weight seems a little lesser than in the example pages. Is this supposed to happen or sth's wrong? I don't have other customized css about this.

If this is not relevent to this forum then I aplologize.

Thanks,

Randy

[Randy]

I observed more of the example pages, and the loading indicator shown before the example is loaded seems different with the grid build-in one. The one shown in the example is of the primary color of Material theme, more line weight. The build-in one is of less line weight and seems grey. Then I guess my app is working as expected. But I think the one shown in example looks more suitable to the theme.

Thanks,

Randy

[Dimiter Topalov]

Hello Randy,

In general it would be best to open separate threads for issues and/or questions that are not directly related to one another or to the initial topic of the thread.

As for the loading indicator, it seems to be consistent after removing all styling from the index.html page and the styles.css files in one of our Stackblitz demos:

https://stackblitz.com/edit/angular-twkvsn-2v2qxq?file=index.html

The loading indicator styling can be further customized by overwriting the built-in CSS:

https://stackblitz.com/edit/angular-twkvsn-478ydp?file=styles.css

I hope this helps, but if the issue persists or if you have further questions regarding the loading indicator, please open a new support thread, briefly explaining the problem, and adding a similar Stackblitz demo or a standalone isolated runnable project where the issue can be observed, so we can inspect it further, determine what is causing it, and try to suggest a solution that is most suitable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Randy]

Hi Dimiter,

Sorry for violating fourm rules.

Your second example did the trick, now the loading style looks exactly like the loading indicator on example pages before the content is loaded. And you are right, the loading indicator within Grid itself is consistent and worked as expected. I confused it with the one on example pages, now it's clear.

Thank you for all the help.

Randy