Tooltip incorrectly positioned first time it shows, but not after

[Jay]

The first time the tooltip shows, it is positioned in the middle of the item. Subsequently, it is positioned correctly. Here is a dojo.

If you hover over any of the boxes, the first time the tooltip shows it is pointing to approximately the bottom of the first line of text in the box. Subsequently, the tooltip is shown pointing to the top of the box (or the bottom, for the first box).

I am basing this off an old thread and its jsbin so it is certainly possible I'm doing something wrong.

Added bonus: sometimes the tooltip doesn't auto-hide. I haven't figured out the details of that yet.

[Martin]

Hello Jay,

A possible workaround would be to force all the Tooltips to show and hide on document.ready:

$(document).ready(function(){
  var tooltips = $("[data-role='tooltip']");
  for(let tooltip of tooltips){
    $(tooltip).data("kendoTooltip").show();
    $(tooltip).data("kendoTooltip").hide();
  }
})

Here you will find a small example to demonstrate the above. Let me know if that would be acceptable to you.

Regards,
Martin
Progress Telerik

[Jay]

Hi Martin. This almost works, but it still seems like a hack to work-around a bug. I say "almost works" because the tooltip for the first box is still incorrectly positioned. It is now correctly pointing up when I first hover over it, but instead of pointing to the border of the box, it is pointing to the middle of the second line of text.

[Martin]

Hello Jay,

I am currently investigating further the root of the behavior. I will get back to you when I have some more information on the subject.

Thank you for your patience.

Regards,
Martin
Progress Telerik

[Martin]

Hello Jay,

I managed to achieve a cleaner solution by making a small correction to the custom binder:

kendo.data.binders.widget.tooltip = {
  value: kendo.data.Binder.extend({
    init: function(widget, bindings, options) {
          kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
      },
    refresh: function() {
      var that = this;      
      var tooltip = this.element;   
      $(tooltip).data("kendoTooltip").setOptions({content: that.bindings["value"].get()});        
    }
  })
};

Here is the modified example for reference.

Let me know if that resolves the issue.

Regards,
Martin
Progress Telerik

[Jay]

Thanks, Martin, that works great. Nice it eliminates the show/hide too.