Tooltip on Expand/Collapse Button

3 posts, 0 answers
  1. Kevin Neumann
    Kevin Neumann avatar
    29 posts
    Member since:
    Feb 2006

    Posted 15 May 2013 Link to this post

    I have a page layout using the RadSplitter that consists of a left panel that can be collapsed. We want to collapse the side panel automatically on some pages (which I already know we can do), but we also want to let the user know that panel has been collapsed and that they can re-expand it if they want. Is there a way to add a RadTooltip to the expand/collapse button? I know you can have a standard browser on-hover tooltip, but we want something that we can pop open automatically on page load that says something like "Missing your sidebar? Click here to open it." and ideally have a button that says "Never show again" where we could store a value (in DB or cookie) to prevent the tooltip in the future.
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 17 May 2013 Link to this post

    Hi Kevin,

    In order to add a RadTooltip to the Collapse/Expand button you will need to go through the following steps:
    • Set the target Splitbar's CollapseExpandPaneText=""
    • Add a RadToolTip to your page
    • Configure its Width, Height (recommended), IsClientId, VisibleOnPageLoad properties
    • In the code behind set the Tooltip's TargetControlID to be equal to the Collapse/Expand button client ID

    For example:

    <telerik:RadToolTip ID="RadTooltip1" runat="server" RelativeTo="Element" Position="MiddleRight" IsClientID="true" Width="270px" Height="80px" VisibleOnPageLoad="true">
        Missing your sidebar? Click here to open it. <br />
        <asp:Button ID="Button1" runat="server" Text="Never show again"/>
    </telerik:RadToolTip>
     
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="700px">
        <telerik:RadPane ID="RadPane1" runat="server" Width="200px" Collapsed="true"></telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Backward" CollapseExpandPaneText=""></telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
    </telerik:RadSplitter>

    CS:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadTooltip1.TargetControlID = "RAD_SPLITTER_BAR_COLLAPSE_Forward_" + RadSplitbar1.ClientID;
        //OR
        //RadTooltip1.TargetControlID = "RAD_SPLITTER_BAR_COLLAPSE_Backward_" + RadSplitbar1.ClientID;
    }

    I hope this would be helpful for you.

    Regards,
    Veselina Raykova
    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. Kevin Neumann
    Kevin Neumann avatar
    29 posts
    Member since:
    Feb 2006

    Posted 17 May 2013 Link to this post

    PERFECT! Works like a charm.
Back to Top