Kendo tooltip content is not updated when angular model is changed

Question

I have defined kendo tooltip in following way:

<i class="fa fa-info-circle ico-tooltip" kendo-tooltip k-content="model.Description"></i>

Initially the content is ok, but when model.Description is changed and the site is not reloaded the k-content shows the old value.

After reload site by F5 there is new value, but this is not what I want to achieve.

It is possible to somehow refresh this tooltip or workaround this issue?

I obviously did it. Model is updated and rest of view are displayed with new content according to new model but tooltip still display old value — user6341612, Jul 05 '16 at 20:38

score 1 · Answer 1 · answered Jan 11 '17 at 10:45

I had a similar issue and I debugged through Kendo's code and following solution works, in my case I wanted to show only upto 22 characters of text from my model and show full text in the tooltip, here is example code

This sample below is using Angular's 1.5 component

<div kendo-tooltip="$ctrl.selectedItemTooltip" k-content="$ctrl.selectedItemText">{{$ctrl.selectedItemText | limitTo:22}}</div>

and in JS

function fetchFromServer(){
   $http.get('/myService').then(function(response){
       ctrl.selectedItemText = response.data.model.text;
       ctrl.selectedItemTooltip.options.content = ctrl.selectedItemText
       ctrl.selectedItemTooltip.refresh();
   });
}

score 0 · Answer 2 · answered Sep 21 '16 at 07:16

in the tooltip options object (when you initialize the tooltip) you set function for the hide event (check documentation ) and in this function you could call refresh function `

var tooltip = $("#container").kendoTooltip({
     hide: function() {
        tooltip.refresh();
      }
})

` i think this will do the trick

Kendo tooltip content is not updated when angular model is changed

2 Answers2