cssangularkendo-uikendo-tooltip

Kendo Angular Tooltip Shadow

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.

EDIT

Thanks to the comment below I was able to get the tooltip to stay up and therefore find what I needed to override. Here is the much better output:

Fixed Tooltip

For anyone else having this issue, here are the styles I put into my code to make this update:

.k-animation-container-shown, .k-animation-container>.k-popup{
  box-shadow: none;
}

.k-tooltip-wrapper .k-tooltip{
  box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.5);
}

.tooltipStandard .k-callout{
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

The bottom style places the shadow onto the triangle and unfortunately it goes over the rectangle just a hair but you'd have to look pretty hard to see that so I'm not super concerned about that. You could also just remove the triangle shadow. If anyone has a good solution to 'clip' the triangle shadow on the top only that would be awesome.

Solution

  • Posting this answer based on the comment by @yazantahhan above.

    I just needed to find the right styles to apply. Thanks to the comment I was able to set the tooltip to show on click using the showOn property. To do so I changed this:

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

    to this:

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

    That allowed me to click the element and the tooltip stayed up and I could inspect it in the developer console.

    Once I found that out I found the right styles pretty quickly. Here are the css overrides I put into my style sheet to make it work:

    .k-animation-container-shown, .k-animation-container>.k-popup{
  box-shadow: none;
}

.k-tooltip-wrapper .k-tooltip{
  box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.5);
}

.tooltipStandard .k-callout{
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

    And this is the result:

    Fixed