ToolTipManager -Adding tooltip for list items of a RadioButtonList

2 posts, 0 answers
  1. Cerasela
    Cerasela avatar
    1 posts
    Member since:
    Jul 2014

    Posted 24 Apr 2018 Link to this post

    I have a RadioButtonList like this:

       <asp:RadioButtonList ID="myRbl" runat="server" AutoPostBack="true">
                                                        <asp:ListItem Selected="True" Value="0">Option 0</asp:ListItem>
                                                        <asp:ListItem Value="1">Option 1</asp:ListItem>
                                                        <asp:ListItem Value="2">Option 2</asp:ListItem>
                                                    </asp:RadioButtonList>

     

    and a ToolTipManger:

    Dim controlClientID As String = myRbl.ClientID
    DirectCast(Page.Master.FindControl("RadToolTipManager1"), RadToolTipManager).TargetControls.Add(controlClientID, True)

    I don't know how to add a tooltip for each listed item in my RadioButtonList .

    If I do something like listItemOpen.Attributes.Add("title", "Option 0") it does add a tool tip to the listed item and it doesn't work with the tooltipmanager. It work only with a tool tip at the button level.


     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5072 posts

    Posted 26 Apr 2018 Link to this post

    Hello,

    The easiest way is to use the AutoTooltipify feature: https://demos.telerik.com/aspnet-ajax/tooltip/examples/autotooltipify/defaultcs.aspx. Here is an example:

    <asp:RadioButtonList ID="myRbl" runat="server" AutoPostBack="true">
        <asp:ListItem Selected="True" Value="0" title="first item">Option 0</asp:ListItem>
        <asp:ListItem Value="1" title="second item">Option 1</asp:ListItem>
        <asp:ListItem Value="2" title="third item">Option 2</asp:ListItem>
    </asp:RadioButtonList>
    <telerik:RadToolTipManager runat="server" ID="rttm1" Width="200px" Height="100px" RenderMode="Lightweight"
        ShowEvent="OnMouseOver" HideEvent="LeaveTargetAndToolTip" RelativeTo="Element" Position="MiddleRight"
        AutoTooltipify="true">
    </telerik:RadToolTipManager>

    The target controls collection is very specific and it looks for a DOM element with that exact ID and in this  case that would be the <table> element ASP renders, not the individual <span> elements inside that hold the input+label.

    The other option you can look into is to generate tooltips with JavaScript when needed according to your desired logic. You can find an example in the following demo that has mouseover attributes for the elements as it is easy to follow, but you can change the logic to something else (like a jQuery delegated handler): https://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx.


    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top