Kendo Angular Tooltip Shadow

Published

I am using Angular and the Kendo control suite. In particular I’m wondering about tooltip styling.

I have successfully styled the tooltip how I want it with one minor exception that I can’t figure out. There seems to be a shadow on the tooltip but it’s around the entire extents including the little triangle callout piece so it doesn’t fit the actual representation.

Tooltip Border Weirdness

It’s pretty faint, but you can see the light edge of the shadow below the triangle (the red arrow I added to highlight it).

Here is my style:

.tooltipStandard *{
  background: var(--adskBlue);
  color: white;
  box-shadow: none;
  text-shadow: none;
}

.tooltipStandard .k-callout{
  background-color: transparent;
  color: var(--adskBlue);
}

and I’m just using it like this:

<div class="contentSections" style="flex: 1" kendoTooltip tooltipClass="tooltipStandard">

Ideally I would like to have the shadow around just the blue portion of the tooltip but turning it off entirely would be fine too.

I tried to use the Chrome console to look at the styles but since it’s a tooltip it won’t stay open long enough for me to go to the inspection panel and select it. It also doesn’t show up when I force hover state from the developer console. Is there any other way to inspect the element from the browser?

Any help would be appreciated.

Source: Angular Questions

Published
Categorized as angular, css, kendo-tooltip, kendo-ui Tagged , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq