Show tooltip to step.

2 posts, 0 answers
  1. Merin
    Merin avatar
    14 posts
    Member since:
    Jul 2013

    Posted 21 Oct 2013 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Oct 2013 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top