How to add different tooltip for RadioButtonList items in asp.net

RadioButtonList listitem tooltip

RadioButtonList is an asp.net list web server control. we can set a tool tip for radiobuttonlist control by setting a value to its built in property named ToolTip. but radiobuttonlist server control have no built in property to display different tool tip for each item.

ListItem.Attributes property get a collection of attribute name and value pair for the ListItem that are not directly supported by the class. we can add any css style name and value pair to this attribute collection by calling ListItem.Attribute.Add() method. Add() method have two arguments, first argument is a css style name and second argument is the specific style's value.

So that to display different tool tip on radiobuttonlist each item, we add an attribute to each list item. here we added a css title style with value to each list item object. as a result in a web browser radiobuttonlist control display different tool tip for each item.

radiobuttonlist-listitem-tooltip.aspx


<%@ Page Language="C#" AutoEventWireup="true"%>    
      
<!DOCTYPE html>
        
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    { 
        if(!Page.IsPostBack)
        {
            RadioButtonList1.Items.Add(new ListItem("Cactus Wren", "1"));
            RadioButtonList1.Items.Add(new ListItem("Rock Wren", "2"));
            RadioButtonList1.Items.Add(new ListItem("Sedge Wren", "3"));
            RadioButtonList1.Items.Add(new ListItem("Carolina Wren", "4"));
            RadioButtonList1.Items.Add(new ListItem("House Wren", "5"));
        }

        foreach(ListItem li in RadioButtonList1.Items)
        {
            //add tooltip for current item
            li.Attributes.Add("title",li.Text);
        }
    }
</script>        
        
<html xmlns="http://www.w3.org/1999/xhtml">        
<head id="Head1" runat="server">        
    <title>asp.net radiobuttonlist listitem tooltip</title>
</head>        
<body>        
    <form id="form1" runat="server">        
    <div>        
        <h2 style="color:MidnightBlue; font-style:italic;">        
            asp.net example - radiobuttonlist listitem tooltip
        </h2>        
        <hr width="550" align="left" color="Gainsboro" />        
        <asp:Label       
            ID="Label1"       
            runat="server"      
            Font-Size="Large"
            Width="350"
            Text="select an item from radiobuttonlist"
            >      
        </asp:Label>      
        <br /><br />
        <asp:RadioButtonList 
            ID="RadioButtonList1"
            runat="server"
            RepeatDirection="Vertical"
            AutoPostBack="true"
            RepeatLayout="Flow"
            >
        </asp:RadioButtonList>  
    </div>        
    </form>        
</body>        
</html>

More asp.net examples