csskendo-uikendo-tooltip

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


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>


Solution

  • 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