Custom Tool Tip

[FastKoder]

Is there a way to customize the tool tip for the Slider in the KendoUI?  With the ASP.Net Ajax version I was updating it during the OnClientSlideStart/End events as well as the OnClientValueChanging event by using a tooltip control and sending it an reference to the active handle by calling the slider.get_activeHandle() method.

I'm not sure how to do this with the KendoUI slider.  The ASP.Net one works but I'd like to use the Kendo one because it works much better with tablet browsers.

Thanks.

[Hristo Germanov]

Hello Fastkoder,

Thank you for contacting us.

Unfortunately we haven't got that functionality for the Kendo UI Slider and I can't offer you a workaround. We will consider to add template for the tooltip of the Kendo UI Slider.

All the best,
Hristo Germanov
the Telerik team

[Todd Anglin]

@FastKoder-

I know this reply comes well after the fact, but I just ran across this scenario today myself.

While we still haven't promoted an official way to manipulate the tool tip during scrolling, you can use some simple JavaScript to workaround the problem temporarily. In your Slider configuration, handle the "slide" event with a function like this:

slide:function(e){

   var   that = this,

      tt = that._drag.tooltipDiv, //Temporary way to access tooltip element

      val = e.value;

             

   tt.css("background-color","hsl("+ val +", 100%,50%)");           

}

In this example, I'm getting a reference to the tooltip element from the internal "_drag" property on my Slider during the slide event. Generally speaking, it's not a good idea to use internal APIs (those prefixed with "_") since they can change in future versions, but this might give you a short term solution.

Hope that helps. We'll try to provide a better official path for this type of customization soon.

-Todd

[Aleksandar]

@ToddAnglin 

I know the reply is way late, but I just wanted to know, what if, instead of manipulating the tooltip div by changing the background, I wanted to call a function that returns some Date. How can I do that. I tried with tt.css.("content", "some text"); but unfortunately it's not even close to working. My idea is this: I have a function that takes as input the slider value which is a representation of date in integer and returns dates. What i need is on the change event the tooltip to show the formatted dates instead of the integer value. Any ideas? How can I insert the returned date value of the function into the tooltip?
I'd be very grateful if You offer anything at all.
Regards,
Alek