Kendo Angular 工具提示阴影

Question

我正在使用 Angular 和 Kendo 控制套件。我特别想知道工具提示样式。

我已经成功地按照我想要的方式设计了工具提示的样式，但有一个我无法弄清楚的小例外。工具提示上似乎有一个阴影，但它围绕着整个范围，包括小三角形标注部分，因此它不符合实际表示。

它很微弱，但你可以看到三角形下方阴影的亮边（我添加的红色箭头突出显示它）。

这是我的风格：

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

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

我只是这样使用它：

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

理想情况下，我希望工具提示的蓝色部分周围有阴影，但完全关闭它也可以。

我尝试使用 Chrome 控制台查看样式，但由于它是一个工具提示，它不会保持打开足够长的时间让我转到检查面板并 select 它。当我从开发人员控制台强制悬停状态时，它也不会显示。有没有其他方法可以从浏览器检查元素？

如有任何帮助，我们将不胜感激。

编辑

感谢下面的评论，我能够让工具提示保持不变，从而找到我需要覆盖的内容。这是更好的输出：

对于遇到此问题的任何其他人，以下是我为进行此更新而放入代码中的样式：

.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));
}

底部样式将阴影放置在三角形上，不幸的是它只是稍微超过了矩形，但你必须非常努力才能看到它，所以我不是很担心。您也可以只删除三角形阴影。如果有人对 'clip' 顶部的三角形阴影有很好的解决方案，那就太棒了。

Answer 1

根据上面@yazantahhan 的评论发布此答案。

我只是需要找到合适的样式来应用。感谢评论，我能够使用 showOn 属性将工具提示设置为在单击时显示。为此，我改变了这个：

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

对此：

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

这让我可以单击该元素并且工具提示保持不变，我可以在开发人员控制台中检查它。

一旦我发现了这一点，我很快就找到了合适的款式。以下是我在样式 sheet 中设置的 css 覆盖，以使其发挥作用：

.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));
}

这是结果：

Kendo Angular 工具提示阴影

Kendo Angular Tooltip Shadow

css

kendo-ui

kendo-tooltip

angular