ToolTipManager -Adding tooltip for list items of a RadioButtonList

[Cerasela]

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.

 

[Marin Bratanov]

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

[Ciupaz]

But how can I bound RadToolTipManager with the ID of my RadRadioButtonList?

I have the need that when the user mouse over some items, the RadButtonList shows the tooltip "Not yet implemented" (for some items, not all). 

Luigi

[Peter Milchev]

Hello Luigi,

The ToolTip property will actually set the title attribute for the element. Then, the RadToolTipManager will auto tooltipify the items:

<telerik:RadRadioButtonList ID="myRbl" runat="server" AutoPostBack="true">
    <Items>
        <telerik:ButtonListItem Selected="True" Value="0" ToolTip="first item" Text="Option 0"></telerik:ButtonListItem>
        <telerik:ButtonListItem Value="1" ToolTip="Not yet implemented!" Text="Option 1"></telerik:ButtonListItem>
        <telerik:ButtonListItem Value="2" ToolTip="third item" Text="Option 2"></telerik:ButtonListItem>
    </Items>
</telerik:RadRadioButtonList>
<telerik:RadToolTipManager runat="server" ID="rttm1" Width="200px" Height="100px" RenderMode="Lightweight"
    ShowEvent="OnMouseOver" HideEvent="LeaveTargetAndToolTip" RelativeTo="Element" Position="MiddleRight"
    AutoTooltipify="true">
</telerik:RadToolTipManager>

Regards,
Peter Milchev
Progress Telerik