tooltip: { format } bug

Thread is closed for posting
15 posts, 0 answers
  1. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 09 May 2012 Link to this post

    When I set the tooltip format on the range slider, it's not changing the tooltip format, it's changing the tick label formatting...tooltip is entirely unaffected.
  2.
  3. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 09 May 2012 Link to this post

    Hello Steve McNiven-Scott,

    I confirm that this is a bug and I am glad to inform you that the bug is fixed. The fix will be included with the next official release of Kendo UI.

    Regards,
    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!
  5. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 11 May 2012 Link to this post

    Thanks Hristo

    Do you happen to know the syntax to MVVM bind that tooltip format property by any chance?
  7. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 14 May 2012 Link to this post

    Hi Steve,

    You can set the tooltip format via data attributes:

    <input id="slider" data-role="slider" data-tooltip='{ "format": "{0:c}" }' />

    Regards,
    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!
  9. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 14 May 2012 Link to this post

    There's still a bug here

    It's a range slider I should say, but this: data-tooltip='{ "format": "test {0} {1}" }

    Is still putting the labels on the ticket marks, and the tooltip result is
    "test 0 test 4" (assuming 0 is the min and 4 is the max).  What I would want is it to be in the format specified "test 0 4"
  11. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 14 May 2012 Link to this post

    Hi Steve,

    This is by design (because of the labels format/tooltip). If you have {0:C} format each value will be formatted one by one(for example: tooltip value "$0.00 - $20.00"), but if you what to remove "-" you need to use template in your tooltip. Can you try this: data-tooltip='{ "template": "test #= selectionStart # #= selectionEnd #" }'.

    Greetings,
    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!
  13. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 14 May 2012 Link to this post

    OH!...that's actually pretty cool (needs to be documented though in your new upcoming doc portal)

    However the values are not updating...
    data-tooltip='{ "template": "test #= Min # #= Max #" }'
    //or
    data-tooltip='{ "template": "test #= get("Min") # #= get("Max") #" }'

    I see "test 0 10" but the 10 isnt changing as I move the slider
  14.
  15. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 14 May 2012 Link to this post

    Hi Steve,

    I can't understand what values are not updated? What are Min and Max? Can you send me a simple test project which reproduces the depicted issue?

    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!
  17. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 14 May 2012 Link to this post

    Its the data item values from my model (this is all inside a template to render out a collection)

    Video: http://screencast.com/t/gAgvqWGyuUB
    (So first is with the format set, the next is without format set)

    I wasn't sure what selectionStart\End were...assumed that was the dataItem to bind to so I changed it.  When they are there it throws script errors saying it cant find it.
  19. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 17 May 2012 Link to this post

    Hi Steve,

    I was able to examine your screencast and I think that this behavior is expected. The values that you show in the tooltip are not updated(the slider hasn't triggered change).

    The major idea for selectionStart/End of the RangeSlider and value for the Slider are to show you the current value in the tooltip. When you do mouse up the slider will trigger change event(and it will update the value in your mvvm view model too). You can examine the slider events here.

    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!
  21. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 17 May 2012 Link to this post

    ...but that's not how the tooltip is supposed to work.  Who wants a static tooltip when you drag things around, the idea is to show the user what number they're on, not what the previous value was :/

    So you're pretty much saying we're not able to define where both numbers showup in the tooltip format then right...cant do "between {0} and {1}" as a tooltip.
  23. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 22 May 2012 Link to this post

    Hi,

    "...but that's not how the tooltip is supposed to work.  Who wants a static tooltip when you drag things around, the idea is to show the user what number they're on, not what the previous value was :/ " Yes, you are right. This is the reason to implement "selectionStart/End" and "value" (those fields represents the current values and you can use them in the tooltip template). I notice that we haven't documentation for the slider's tooltip template and I will fix this problem.

    "So you're pretty much saying we're not able to define where both numbers showup in the tooltip format then right...cant do "between {0} and {1}" as a tooltip." Unfortunately, you can't do it with the format, because of the ticks value/tooltip(as i mention in one of my previous replies). But you can achieve this functionality with template:

    data-tooltip = '{ "template": "between #= selectionStart # and #= selectionEnd #" }'
    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!
  25. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 22 May 2012 Link to this post

    This doesn't work still (at least when my template is referencing array elements

    data-tooltip = '{ "template": "between #= Capacity[0] # and #= Capacity[1] #" }'

    Again it's just static text that contains the previous values...I assume this is because I changed to an array over two seperate min\max values?
  26.
  27. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 25 May 2012 Link to this post

    Hi Steve,

    Can you examine this jsFiddle example and tell me if you don't understand something.

    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!
  29. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 25 May 2012 Link to this post

    Ooooh...."selectionStart" and "selectionEnd" are internal values then!  I thought they were properties on the model.
Back to Top