How to add Tootip for each item of Radiobutton from database.


You cannot assign a tooltip for each if you use a datasource for your radiobutton with both .DataTextField  and .DataValueField assigned to two columns from the datasource.
To solve this problem, you can use a listitem to add both text and value as a listitem and add an attribute to this listitem for the "title" which will behavior as tooltip.
Here is the code snippet:
 

string connectionString = ConfigurationManager.ConnectionStrings["test_for_forumConnectionString"].ConnectionString;

SqlConnection sqlConn1 = new SqlConnection(connectionString);

SqlCommand sqlCmd_GetChangeTypes = new SqlCommand("Select ID, Name, tooltip FROM [_aTable]", sqlConn1);

sqlConn1.Open();

SqlDataReader rblReader_ChangeTypes = sqlCmd_GetChangeTypes.ExecuteReader();

if (rblReader_ChangeTypes.HasRows)

{

while (rblReader_ChangeTypes.Read())

{

ListItem li = new ListItem(rblReader_ChangeTypes["Name"].ToString(), rblReader_ChangeTypes["ID"].ToString());

li.Attributes.Add("title", rblReader_ChangeTypes["ToolTip"].ToString());

rblChangeType.Items.Add(li);

}

rblChangeType.SelectedIndex = 0;

}

else

{

// logic for no rows had been returned

}

rblReader_ChangeTypes.Close();

sqlConn1.Close();

*****Edit*****************

***A follow up question to control the Duration of the tooltip**************

            while (rblReader_ChangeTypes.Read())
            {
              
               string myLink = "<a href=\"#\" class=\"info\">" + rblReader_ChangeTypes["Name"].ToString() + "<span>"+rblReader_ChangeTypes["ToolTip"].ToString()+"</span></a>";
               ListItem li = new ListItem(myLink, rblReader_ChangeTypes["ID"].ToString());
                //li.Attributes.Add("title", rblReader_ChangeTypes["ToolTip"].ToString());
                //li.Attributes.Add("class", "info");
            
                  rblChangeType.Items.Add(li);

                //Source for Tooltip
                // http://jlhaslip.trap17.com/samples/tooltips/index.html
              
            }

 

Style:

 <style type="text/css">
 /*
        =================================
        start of Tooltip css code here
        ================================= */
 
        a.info{
        position:relative;           /*this is the key*/
        z-index:24;
        background-color:#e0e0e0;    /* background colour of display text */
        color:#000000;               /* colour of display text */
        border:1px dotted #999;    /* border colour */
        text-decoration:none;
        font-style:italic;
        }
 
        a.info:hover {
        z-index:25;
        background-color:#ffff66;
 
        }
 
        a.info span{
        display: none;  /* hide the span text using this css */
        }
 
        a.info:hover span{ /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top: 1.5em;
        left: 3em;
        width:15em;
        border:1px solid #ff0000; /* border colour */
        background-color:#ffff99; /* background colour here */
        color:#000000;         /* text colour */
        text-align: center;
        font-size: .8em;
        font-style:italic;
        z-index:30;
        }
 

Here is a link of the style for your tooltips:

http://jlhaslip.trap17.com/samples/tooltips/index.html

 

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s