This is a migrated thread and some comments may be shown as answers.
ToolTipManager -Adding tooltip for list items of a RadioButtonList
3 Answers 24 Views
This is a migrated thread and some comments may be shown as answers.
Cerasela
Top achievements
Rank 1
Cerasela asked on 24 Apr 2018, 05:37 PM

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.


 

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 26 Apr 2018, 10:19 AM
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.
0
Ciupaz
Top achievements
Rank 2
answered on 22 Jul 2020, 08:38 AM

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

0
Peter Milchev
Telerik team
answered on 24 Jul 2020, 08:54 AM

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

Asked by
Cerasela
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Ciupaz
Top achievements
Rank 2
Peter Milchev
Telerik team
Share this question
or