剑道角度工具提示阴影答案

【问题标题】：Kendo Angular Tooltip Shadow剑道角度工具提示阴影
【发布时间】：2021-07-22 18:22:55
【问题描述】：

我正在使用 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 控制台查看样式，但由于它是一个工具提示，因此它不会保持打开的时间足够长，我无法转到检查面板并选择它。当我从开发人员控制台强制悬停状态时，它也不会显示。还有其他方法可以从浏览器中检查元素吗？

任何帮助将不胜感激。

编辑

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

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

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

底部样式将阴影放置在三角形上，不幸的是它只是一根头发在矩形上，但你必须看起来很难看到，所以我不太担心。您也可以删除三角形阴影。如果有人有一个很好的解决方案来“剪裁”顶部的三角形阴影，那就太棒了。

【问题讨论】：

也许你可以添加一个堆栈闪电战？它对我来说很好。您可以使用showOn="click" 然后单击元素以显示工具提示并检查。
太棒了，showOn 属性是我需要的，不知道它在那里。在这样做之后，我能够确定我需要覆盖的类在哪里。我将使用新代码更新问题，但如果您想将此作为答案，我会接受。

标签： css angular kendo-ui kendo-tooltip

【解决方案1】：

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

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

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

到这里：

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

这让我可以单击元素，并且工具提示保持不变，我可以在开发者控制台中对其进行检查。

一旦我发现了这一点，我很快就找到了正确的样式。以下是我放入样式表以使其工作的 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));
}

结果如下：

【讨论】：