Custom Tool Tip

4 posts, 0 answers
  1. FastKoder
    FastKoder avatar
    2 posts
    Member since:
    Dec 2011

    Posted 13 Dec 2011 Link to this post

    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.

  2. Hristo Germanov
    Hristo Germanov avatar
    703 posts

    Posted 16 Dec 2011 Link to this post

    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!
  3. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 17 Feb 2012 Link to this post


    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:

       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.

  4. Aleksandar
    Aleksandar avatar
    2 posts
    Member since:
    Nov 2012

    Posted 14 Nov 2012 Link to this post


    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.
Back to Top