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

Show tooltip to step.

1 Answer 33 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Merin
Top achievements
Rank 1
Merin asked on 21 Oct 2013, 08:49 AM
I am using a radslider with values 1 to 5 with1 step. I want to know whether I can give a tooltip for each step values.

Any suggestions/input?
Merin

1 Answer, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 21 Oct 2013, 10:51 AM
Hi Merin,

Please try the following code snippet to show the tooltip for RadSlider.

ASPX:
<telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter"
    ShowCallout="false" Height="20px" ShowEvent="fromcode" HideEvent="FromCode">
</telerik:RadToolTip>
<telerik:RadSlider runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
    MinimumValue="0" MaximumValue="5" SmallChange="1" OnClientValueChanging="OnClientValueChanging"
    ShowDecreaseHandle="false" OnClientSlideStart="OnClientSlideStart" OnClientSlideEnd="OnClientSlideEnd"
    ShowIncreaseHandle="false">
</telerik:RadSlider>

JavaScript:
<script type="text/javascript">
    function OnClientValueChanging(sender, args) {
        if (!isSliding) return;
        var tooltip = $find("<%= RadToolTip1.ClientID %>");
        ResetToolTipLocation(tooltip);
        tooltip.set_text(args.get_newValue());
    }
    function OnClientSlideStart(sender, args) {
        isSliding = true;
        var tooltip = $find("<%= RadToolTip1.ClientID %>");
        ShowRadToolTip(tooltip, sender);
    }
    function OnClientSlideEnd(sender, args) {
        isSliding = false;
        var tooltip = $find("<%= RadToolTip1.ClientID %>");
        tooltip.hide();
    }
    function ShowRadToolTip(tooltip, slider) {
        var activeHandle = slider.get_activeHandle();
        if (!activeHandle) return;
        tooltip.set_targetControl(activeHandle);
        ResetToolTipLocation(tooltip);
    }
    function ResetToolTipLocation(tooltip) {
        if (!tooltip.isVisible())
            tooltip.show();
        else
            tooltip.updateLocation();
    }
</script>

Thanks,
Princy.

Tags
Slider
Asked by
Merin
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Share this question
or