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

Custom Tool Tip

3 Answers 182 Views
Slider
This is a migrated thread and some comments may be shown as answers.
FastKoder
Top achievements
Rank 1
FastKoder asked on 13 Dec 2011, 07:00 PM
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.

3 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 16 Dec 2011, 05:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Todd Anglin
Top achievements
Rank 2
answered on 17 Feb 2012, 11:00 PM
@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
0
Aleksandar
Top achievements
Rank 1
answered on 14 Nov 2012, 01:13 PM
@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
Tags
Slider
Asked by
FastKoder
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Todd Anglin
Top achievements
Rank 2
Aleksandar
Top achievements
Rank 1
Share this question
or