This is a migrated thread and some comments may be shown as answers.

Tooltip incorrectly positioned first time it shows, but not after

5 Answers 332 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Iron
Veteran
Jay asked on 10 Mar 2020, 02:24 PM

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.

5 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 12 Mar 2020, 02:11 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jay
Top achievements
Rank 1
Iron
Veteran
answered on 12 Mar 2020, 06:25 PM
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.
0
Martin
Telerik team
answered on 16 Mar 2020, 04:37 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Accepted
Martin
Telerik team
answered on 17 Mar 2020, 09:16 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jay
Top achievements
Rank 1
Iron
Veteran
answered on 23 Mar 2020, 01:20 PM
Thanks, Martin, that works great. Nice it eliminates the show/hide too.
Tags
ToolTip
Asked by
Jay
Top achievements
Rank 1
Iron
Veteran
Answers by
Martin
Telerik team
Jay
Top achievements
Rank 1
Iron
Veteran
Share this question
or