0

我正在使用 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));
}

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

4

1 回答 1

0

根据上面@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));
}

这是结果：

固定的

于 2021-07-27T18:09:53.213 回答