show the tool tip at slider

4 posts, 0 answers
  1. Dave
    Dave avatar
    4 posts
    Member since:
    Jul 2012

    Posted 08 Aug 2012 Link to this post

    My requirement is to show the tool tip at slider always, it should never disappear from the Slider control.

    I need the similar tooltip given in below image


  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 10 Aug 2012 Link to this post

    Hi Dave,

    You can achieve the desired functionality by using the RadToolTip control to display a tooltip over the drag handle. For your convenience I have attached a sample page that demonstrates this approach. Please use it as a reference for incorporating this feature into your actual project.

    Kind regards,
    Slav
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave
    Dave avatar
    4 posts
    Member since:
    Jul 2012

    Posted 11 Aug 2012 Link to this post

    Thanks for reply,
    this has worked for me, but my requirement is if there are 2 slider in my page, and I need to show the tool tip for each slider permanently.

    With the given code the  I am not able to achieve the requirement, to show the tooltip for both slider.

     





    Code is as below.


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadSliderWithRadTooltips.aspx.cs"
        Inherits="RadSliderWithRadTooltips" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <script type="text/javascript">

            function pageLoad() {
               
                var slider = $find("<%= radSliderMonthlyIncome.ClientID %>");
                var slider1 = $find("<%= radSliderTaxBracket.ClientID %>");
                setTimeout(function () {
                    var ttip = $find("<%= radToolTipMonthlyIncome.ClientID %>");
                    var ttip1 = $find("<%= radToolTipTaxBracket.ClientID %>");

                    var dragHandle = slider.get_dragHandles()[0];
                    var dragHandle1 = slider1.get_dragHandles()[0];
                    ttip.set_targetControl(dragHandle);
                    ttip.set_text(slider.get_value().toString());

                    ttip1.set_targetControl(dragHandle1);
                    ttip1.set_text(slider1.get_value().toString());

                    OnClientValueChanged(slider1);
                    OnClientValueChanged(slider);
                }, 0);
            }

            function OnClientValueChanged(sender, args) {
                var varcontrolname = null;
                var vartooltipname = null;

                var senderid = sender.get_id();
                
                switch (senderid) {
                    case "<%= radSliderMonthlyIncome.ClientID %>":
                        vartooltipname = "<%= radToolTipMonthlyIncome.ClientID %>";
                        break;
                    
                    case "<%= radSliderTaxBracket.ClientID %>":
                        vartooltipname = "<%= radToolTipTaxBracket.ClientID %>";
                        break;
                   
                    default: alert("have not matched with any sender");
                        break;
                }

                var ttip = $find(vartooltipname);
                ttip.set_text(sender.get_value().toString());
    //            
                setTimeout(function () {
                    ttip.show();
                }, 10);
            }

            //        

        
        </script>
        <div>
            <telerik:RadSlider ID="radSliderMonthlyIncome" runat="server" Width="400" Height="50" OnClientValueChanged="OnClientValueChanged"
                Style="margin-top: 100px;">
            </telerik:RadSlider>
            <telerik:RadToolTip runat="server" ID="radToolTipMonthlyIncome" ShowEvent="FromCode" HideEvent="FromCode" RelativeTo="Element" Position="TopCenter">
            </telerik:RadToolTip>
          
           <telerik:RadSlider ID="radSliderTaxBracket" runat="server" Width="400" Height="50" OnClientValueChanged="OnClientValueChanged"
                Style="margin-top: 100px;">
            </telerik:RadSlider>
            <telerik:RadToolTip runat="server" ID="radToolTipTaxBracket" ShowEvent="FromCode" HideEvent="FromCode" RelativeTo="Element" Position="TopCenter">
            </telerik:RadToolTip>
          
        </div>
        </form>
    </body>
    </html>

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 14 Aug 2012 Link to this post

    Hello Dave,

    You cannot have more than one RadToolTip visible on the page at any given time. This is the behavior any toolip has, in the OS for example, or the regular browser tooltips - they all close when another tooltip is shown and therefore the RadTooltip has the same behavior.

    What I can suggest is to replace it with a small HTML structure that you will position according to the slider handle with JavaScript. I am attaching a simple example of the logic to the thread. You can use it as base and extend it to match your requirements.


    Greetings,
    Marin Bratanov
    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.
Back to Top