title: Custom tooltip in Kendo Knockout Slider
body: <p>I'm trying to create a custom tooltip that displays inside the draghandle of a Kendo slider and dynamically updates as the draghandle is moved.</p>
  
  <p>I've been able to do this in the past using plain Kendo by updating the text of the custom tooltip with a slide function, like so:</p>
  
  <pre><code>element.kendoSlider({
      min: 0,
      max: 100,
      tooltip: { 'enabled': false },
      slide: sliderOnSlide,
      tickPlacement: 'none',
      showButtons: false,
      smallStep: 1,
      largeStep: 1
  });
  
  var slider = element.data('kendoSlider');
  
  slider.wrapper.find('.k-draghandle').empty().html('&lt;span class="sliderTip"&gt;0%&lt;/span&gt;');
  
  function sliderOnSlide(e) {
      $('.k-draghandle.draggerOn .sliderTip').empty().text(e.value.toString() + '%');
  }
  </code></pre>
  
  <p>I imagine this can be accomplished more cleanly and reliably with Knockout, but so far I've not been successful. I've attempted to get at the draghandle by using a Knockout custom binding handler:</p>
  
  <pre><code>&lt;input class="slider col" data-bind="kendoSlider: { value: currValue, enabled: enabled, min: 0, max: 100, tickPlacement: 'none', smallStep: 1 }, sliderTip: {}" /&gt;
  
  var viewModel = function () {
      this.currValue = ko.observable(0);
      this.enabled = ko.observable(true);
      this.width = ko.observable();
  };
  
  ko.bindingHandlers.sliderTip = {
      init: function(element, valueAccessor) {
          var dragger = $(element).closest('.k-slider').find('.k-draghandle');
  
          dragger.empty().html('&lt;span class="sliderTip"&gt;0%&lt;/span&gt;');
      } 
  };
  
  ko.applyBindings(new viewModel());
  </code></pre>
  
  <p>I've been able to insert my custom tooltip, but it's not displaying, and I can't figure out how to get it updating dynamically. My attempts to shoehorn my sliderOnSlide function into Kendo-Knockout have been unsuccessful.</p>
  
  <p>Would be delighted to get some help on this one. Here's a JSFiddle I've been experimenting with that contains the code listed above and the corresponding HTML/CSS: <a href="http://jsfiddle.net/MontiDesign/DuZK3/17/" rel="nofollow">http://jsfiddle.net/MontiDesign/DuZK3/17/</a></p>