How to change Kendo UI Tooltip styling in a given container?

Question

I have a few different areas that use kendo ui tooltips and I want to change the style of only a certain set of tooltips in a given area, I have tried a couple different ways but its not working, what am I missing here?

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!`
  });
}

#ButtonsArea {
  margin-bottom: 5px;
}


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


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

<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>

Answer 1

The tooltip is not a child of #ButtonsArea. One way to do this is to add a CSS class to the tooltip's popup field in the tooltip's show event.

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!`,
    show: onShow
  });
}

function onShow(e) {
  e.sender.popup.element.addClass('SpecialTooltip');
}

.SpecialTooltip {
  background-color: hotpink !important;
}

<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>

Here is a DOJO DEMO