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

Text Tooltip Slider with itemstyle="none"

7 Answers 49 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
omer
Top achievements
Rank 1
omer asked on 13 Jan 2012, 09:41 PM
Hello guys

i am using demo slider with tooltip in this link Range Slider
I need to use slider without item style but with text tooltip.
when user sliding handle i need to display text in tooltip. 
when 1-A
when 2- B etc

any starting point or advice?

Regards

Omer

7 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 17 Jan 2012, 02:08 PM

Hello Omer,

I believe the following demo is quite close to your requirement on showing tooltips: http://demos.telerik.com/aspnet-ajax/slider/examples/databinding/defaultcs.aspx.

Another approach would be to use the drag handles and the OnClientValueChanged event to get the new value as well as the handle that was dragged, then set the value (or a modified string, depending on your custom scenario) to the tooltip. I am attaching to this post a simple page that shows this in action and uses the demo you linked as base: http://screencast.com/t/PZoeacEOej.



All the best,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
omer
Top achievements
Rank 1
answered on 20 Jan 2012, 09:42 PM
Thank you for your answer Marine. 
I will try both of advice. 
By the way can you help me to set logic of this java script code?
I need display text in my slider tooltip with itemstyle="none"
Thank you in advance..

Ömer


    <script type="text/javascript">
        var theTooltip = null;
        function pageLoad()
        {
            theTooltip = $find("RadToolTip1");
        }
 
        function OnClientValueChanged(sender, args)
        {
            var newValue = args.get_newValue();
            var handle = sender.get_activeHandle();
            theTooltip.set_targetControl(handle);
---------
if handle = 1 ;
theTooltip.set_text(A);
if handle = 2 ;
theTooltip.set_text(B);
...
something like this..
-----------------
            theTooltip.set_text(newValue);
            setTimeout(function ()
            {
                theTooltip.show();
            }, 20);
        }
    </script>
0
Accepted
Marin Bratanov
Telerik team
answered on 23 Jan 2012, 04:36 PM
Hi Ömer,

You can simply create a JavaScript object that will act as a dictionary. You can see how this is done in this article for example (or in any other internet resource). Then, instead of adding a switch statement with many lines of code you can simply add the expected values from the slider as keys for the array (when you create it. When and how this happens is up to your custom logic and scenario) and simply use newValue = myArray[args.get_newValue()]; as this newValue variable is already being set as the text.


Kind regards,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
omer
Top achievements
Rank 1
answered on 10 Feb 2012, 05:57 PM
Thank you for reply. 

i did it like your advice and it works.

var myArray = new Array();
myArray['1'] = 'sample1';
myArray['2'] = 'sample2';
myArray['3'] = 'sample3';
myArray['4'] = 'sample4';
newValue = myArray[args.get_newValue()];
tooltip.set_text(newValue);
0
omer
Top achievements
Rank 1
answered on 10 Feb 2012, 06:27 PM
any advice for range slider tooltip? :)

function UpdateToolTipText2(tooltip, slider) {
    var div = document.createElement("div");
    div.style.whiteSpace = "nowrap";
    if (slider.get_itemType() == Telerik.Web.UI.SliderItemType.Item)
        div.innerHTML = (slider.get_selectedItems()[0].get_text() + " / " + slider.get_selectedItems()[1].get_text());
    else
        div.innerHTML = (slider.get_selectionStart() + " / " + slider.get_selectionEnd());
 
    tooltip.set_contentElement(div);
}
0
rdmptn
Top achievements
Rank 1
answered on 15 Feb 2012, 09:40 AM
I am not sure what your problem with this code is or what you are trying to achieve, but have you examined the Online demos? There is a demo with a range slider and a tooltip right here: http://demos.telerik.com/aspnet-ajax/slider/examples/rangeslider/defaultcs.aspx. You can take a look at the slider demos and at the tooltip demos for more ideas. You can also examine their documentation for an API list - here for the slider, and here for the tooltip.
0
omer
Top achievements
Rank 1
answered on 15 Feb 2012, 11:43 AM
i need to iplement this logic to tooltip which for rangeslider.

regards
Tags
ToolTip
Asked by
omer
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
omer
Top achievements
Rank 1
rdmptn
Top achievements
Rank 1
Share this question
or