Tooltip used for GridView, DataList or Repeater

Tooltip control can be used for controls inside GridView, DataList or Repeater.
The following is a Repeater control.

Hovering on each thumbnail image will get its big size image populated by its Tooltip property setting.
Hovering on the "...details" link will load on demand (AJAX) with its description content through a web service method.

...details

Source Code of the Demo:

Page (aspx)

<mb:TooltipManager ID="TooltipManager1" runat="server" MaxWidth="450px" Position="Top"
    TipBackgroundColor="#EEE" TipBorderColor="#666" OffsetY="-10px" />
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div class="repeaterRow">
            <span class="thumbWrapper"><asp:Image ID="Image1" runat="server" 
            ImageUrl='<%# Eval("Thumbnail") %>' style="width:100px;height:70px;" /></span>
            <mb:TooltipExtender ID="Image1_TooltipExtender" runat="server" TargetControlID="Image1" 
            Tooltip='<%#"<img src=\""+Eval("Image")+"\" style=\"width:300px;height:210px;\" />" %>' />
                  
            <a href="javascript:void(0);"><asp:Label ID="Label1" runat="server" Text="...details" /></a>
            <mb:TooltipExtender ID="Label1_TooltipExtender" runat="server" 
            TargetControlID="Label1" AjaxTipId='<%#Eval("MyId") %>' 
            DataFetchMethod="GetTooltipDataForRepeater" WebservicePath="~/Tooltip/WebService1.asmx" />
            </div>
        </ItemTemplate>
    </asp:Repeater>

You can see that the Tooltip property was set directly from the codes shown above. Sometimes it is more convenient to write it in the code behind. For example, we can set it in this way: Tooltip='<%#GetTooltip(Eval("Image")) %>'
And we also declare the protected string GetTooltip(object imageUrl) { ... } method from the code behind.
As mentioned in page Populating with data, we should always define the image size by its style attribute explicitly so that the image will display properly across all browsers. In this demo we have declared the width and height for both thumbnail images shown in the repeater and its enlarged images shown in the tooltip.

Code Behind

public partial class ForRepeater : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindData();
        }
    }

    private void BindData()
    {
        Repeater1.DataSource = GetDataTable1();
        Repeater1.DataBind();
    }

    private DataTable GetDataTable1()
    {
        DataTable table1 = (DataTable)Cache["TooltipDataSource1"];
        if (table1 == null)
        {
            table1 = new DataTable();
            table1.Columns.Add("MyId", typeof(int));
            table1.Columns.Add("Image", typeof(String));
            table1.Columns.Add("Thumbnail", typeof(String));
            XmlDocument doc = new XmlDocument();
            doc.Load(Server.MapPath("~/Tooltip/RepeaterData.xml"));
            XmlNodeList nodes = doc.DocumentElement.ChildNodes;
                
            for (int i = 0; i < nodes.Count; i++ )
            {
                table1.Rows.Add(new object[] { i, 
                    nodes[i].Attributes["src"].Value, nodes[i].Attributes["thumbnailsrc"].Value });
            }
            Cache.Insert("TooltipDataSource1", table1, null, 
                System.Web.Caching.Cache.NoAbsoluteExpiration, TimeSpan.FromMinutes(10));
        }
        return table1;
    }
}

Web Service (used by the Load on Demand AJAX call to populate the "...details")

using System.Web.Services;
using System.Xml;
using System.Data;
using System;
using System.Web;

namespace WebApp.Tooltip
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, 
    // using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        //Note: the parameter name tipId cannot be changed to other names
        public string GetTooltipDataForRepeater(string tipId)
        {
            DataTable table2 = GetDataTable2();
            return table2.Select("RowID=" + tipId)[0][1].ToString();
        }

        private static DataTable GetDataTable2()
        {
            DataTable table2 = new DataTable();
            table2.Columns.Add("RowID", typeof(int));
            table2.Columns.Add("Description", typeof(String));
            XmlDocument doc = new XmlDocument();
doc.Load(HttpContext.Current.Server.MapPath("~/Tooltip/RepeaterData.xml"));
            XmlNodeList nodes = doc.DocumentElement.ChildNodes;
            for (int i = 0; i < nodes.Count; i++)
            {
                //Use InnerText other than InnerXml if CDATA presents 
                table2.Rows.Add(new object[] { i, 
String.Format("<div style='float:left;width:160px;'>{0}</div><img src='{1}'
style='float:left;width:100px;height:70px;margin-left:6px;' />", 
nodes[i].ChildNodes[0].InnerText, nodes[i].Attributes["thumbnailsrc"].Value) });
            }
            return table2;
        }
    }
}

Tooltip

Menus

Tooltip

Image Controls