how to refresh cluetip when value of knockout observable changes

Question

how to change whats inside the cluetip.

 $('a.cal_box').cluetip({local:true, hideLocal: true ,onShow: function(ct, ci){ this.calendar = $('<div>').datepicker({ beforeShowDay: daysToMark,onSelect: function(dateText, inst) { 
  var date = $(this).datepicker( 'getDate' ); 
  //var c = ko.contextFor($("#KnockOutCalendar")[0]);
    calendarObject.$data.Date(date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate());   
    calendarObject.$data.Time(date.getHours());
    //$('a.cal_box').cluetip({local:true,activation:'hover', hideLocal: true, sticky: true, arrows: true, cursor: 'pointer',width:970, height:530}); 
  } }).appendTo(ci); }, onHide: function(ct, ci){ this.calendar.datepicker( "destroy" ).remove(); }, sticky: true, arrows: true, cursor: 'pointer',width:970, height:530});

when the cluetip called on the click of cal_box.

i show calendar in it and a to do list when i click on calendar i change the ko.observable()

i just want when the value of ko.observable change it should refresh the cluetip box but should retain the calendar where it was click just the todo list should be refrsh according to that date.

<div id="KnockOutCalendar" data-bind="foreach: {data:Calendar,afterRender: myPostProcessingLogic}">
             <!-- ko if: $parent.ChangeDate(dstart) == $parent.Date() -->
            <div class="timeline_row">

              <div class="timeline_row_heading" ><span data-bind="text: $parent.ChangeTime(dstart)"></span>:00</div>
              <div class="timeline_row_content showcalen_entry"><span data-bind="text: dstart"></span> - <span data-bind="text: subject"></span></div>

            </div>
            <!-- /ko -->
            </div>

in this foreach i display date when there is data on the event on that if it there display the timeline_row else it should be blank

what i want is when i click on a date and when it change the self.Date(clickedDate) the value changes on run time as the function alert with new data but cluetip remains the same as it was initialized when i click on cal_box i want it to reinitialized or you say again cliking on cal_box but i am not doing it.

Answer 1

Best way is to create a custom binding with a update function, you will have access to both the element and observable so you can update the cluetip from there. the update function triggers each time the value mutate.