when setting content field to a div element.. having issues with attaching and visibility

Question

Problem:I am assigning a div to the content property of a kendo tooltip... problem is, when I attached the tooltip... the div is sitting there, and the tooltip does not REALLY wire up until I hover over the element I attached it to... you can see in my code below how this is not working... paste into a kendo dojo, and seee.... just click the button (DO NOT HOVER over the text box yet).. then you will see the div show up, and when you hover over the text box, it will do what it's supposed to do... I made a workaround , which is commented out... but it flashes for a second... is there a way to just make the tooltip wire up and hide the content div?

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.mobile.all.min.css">
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.223/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="view" data-bind="enabled: isNameEnabled">
      <button id="button1" data-bind="click: updateTooltip">Change Tooltip</button>
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <input id="text1" type="text" data-bind="value: name" />
      <div id="toolTipDiv"></div>
    </div>
    <script>
      var viewModel = kendo.observable({
        isNameEnabled: false,
        name: "John Doe",
        updateTooltip: function () {
          var kendoToolTip = window.toolTipEl.data("kendoTooltip");
          // comment this out to see
          //div1.hide();
          //kendoToolTip.show();
          //kendoToolTip.hide();
          //div1.show();
          //end comment
          div1.text(text1.value);
        }
      });
      var div1 = $("#toolTipDiv");

      window.toolTipEl = $("#text1");
      kendo.bind($("#view"), viewModel);
      window.toolTipEl.kendoTooltip({
        content: div1, position: "top",autohide:true
      });

    </script></body>
</html>

The Dread Pirate Stephen · Answer 1 · 2017-05-04T19:00:44.823

The div shows up because it is visible and you just made its contents non-blank. Once the tooltip is shown once, kendo takes over control and wraps it in another div that it hides and shows as necessary. Note that "aria-hidden: true" does not actually hide the div...it is simply a directive to screen-readers...you still have to actually use real CSS to hide the div.

You need to ensure that the div is hidden initially(before kendo wraps it) and remove the display: none; once you "hand it off" to kendo.

Or...hide the div and set the content to a function that just returns the content of the div instead of binding to the div itself, i.e.

<div id="toolTipDiv" aria-hidden="true" style="display: none"></div>
...
updateTooltip: function () {
      div1.text(text1.value);
}
...
window.toolTipEl.kendoTooltip({
    content: function(e) {
      return div1.text();
    },

Example: http://dojo.telerik.com/@Stephen/iqaLA

Update Turns out that the content only gets called the first time the tip is shown for the element, not every time the tooltip is shown, so dynamic changes to the contents (or even the input's title attribute) don't change the tooltip.

So, ignore my answer and try this: http://www.telerik.com/forums/dynamic-content-de3951ae5752

that "aria-hidden: true" was some testing, I have removed it... I have used the refresh, it does not matter.. put the text in a kendo dojo, and try it :) and make sure your suggestion works before suggesting it, I cannot find a way around it.. — ttomsen, May 05 '17 at 12:34
You mean like this *working* example: http://dojo.telerik.com/@Stephen/aHeQE? My original suggestion solves the problem *as stated* in your question. My update (which works if you use it correctly) was only to facilitate implementing a truly dynamic tooltip instead of a one-time-only change as specified in your question. — The Dread Pirate Stephen, May 05 '17 at 13:07

when setting content field to a div element.. having issues with attaching and visibility

1 Answers1