如何修改指定容器内Kendo UI Tooltip的样式？已尝试方法未生效

我有多个使用Kendo UI Tooltip的区域，希望仅修改指定区域内某一组Tooltip的样式，但尝试了几种方法都未生效，请问我遗漏了什么？

现有代码 #

JavaScript

CreateButtonTooltips();

function CreateButtonTooltips() {
  const buttons = $("#ButtonsArea button");
  for (let i = 0; i < buttons.length; i++) {
    TooltipTemplate(`#${buttons[i].id}`);
  }
}

function TooltipTemplate(id) {
  $(`${id}`).kendoTooltip({
    position: "bottom",
    callout: false,
    offset: 10,
    width: 138,
    content: `Howdy, I'm ${id}'s Tooltip!`
  });
}

CSS

#ButtonsArea {
  margin-bottom: 5px;
}

/* 尝试过但无效的样式 */
/*
#ButtonsArea.k-widget.k-tooltip {
  background-color: hotpink;
}
*/

/*
#ButtonsArea.k-tooltip {
  background-color: hotpink;
}
*/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.4.0/default/default-ocean-blue.css">

<div id="ButtonsArea">
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
</div>

问题核心原因 #

Kendo UI Tooltip默认会把生成的提示框DOM元素追加到<body>标签下，而非触发按钮的父容器#ButtonsArea内部。因此你之前写的#ButtonsArea .k-tooltip这类依赖父容器层级的选择器，根本匹配不到实际的Tooltip元素。

两种解决方案 #

方案1：将Tooltip挂载到目标父容器

修改Tooltip配置，添加appendTo选项，指定把Tooltip元素插入到#ButtonsArea中：

function TooltipTemplate(id) {
  $(`${id}`).kendoTooltip({
    position: "bottom",
    callout: false,
    offset: 10,
    width: 138,
    content: `Howdy, I'm ${id}'s Tooltip!`,
    appendTo: "#ButtonsArea" // 新增配置
  });
}

然后启用你之前写的CSS即可生效：

#ButtonsArea .k-tooltip {
  background-color: hotpink;
}

方案2：给Tooltip添加自定义类

通过popupClass选项给目标Tooltip添加唯一自定义类，直接通过类选择器设置样式：

function TooltipTemplate(id) {
  $(`${id}`).kendoTooltip({
    position: "bottom",
    callout: false,
    offset: 10,
    width: 138,
    content: `Howdy, I'm ${id}'s Tooltip!`,
    popupClass: "buttons-area-tooltip" // 新增自定义类
  });
}

对应的CSS：

.buttons-area-tooltip {
  background-color: hotpink !important; 
  /* 若主题样式优先级更高，可添加!important强制覆盖 */
}

注意点 #

• 方案1需留意父容器的定位属性，避免Tooltip出现位置偏移；
• 方案2更灵活，无需依赖DOM层级，适合多组Tooltip区分样式的场景。

内容的提问来源于stack exchange，提问作者Chris