Hi micah,
Refer the below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
text-align: center;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.popover-markup > .trigger').popover({
html: true,
title: function () { return $(this).parent().find('.head').html(); },
container: 'body',
placement: 'bottom',
trigger: 'hover'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="popover-markup">
<asp:LinkButton ID="LinkButton3" class="trigger" runat="server" data-container="body"
data-toggle="popover" data-placement="bottom">
<asp:Image ID="Imageclub" Text='<%#Eval("ImageName")%>' runat="server" src='<%#Eval("ImageName")%>'
alt="" data-aria-label-part="" Height="74" Width="74" class="clubimg fa-circle-o img-circle animated slideInRight"
BorderColor="Silver" BorderStyle="Solid" BorderWidth="1" />
</asp:LinkButton>
<div class="head hide">
<table>
<thead>
<tr>
<th colspan="2">
<u>User Details</u>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<b>Name</b>
</td>
<td>
<%#Eval("Name")%>
</td>
</tr>
<tr>
<td>
<b>UserName</b>
</td>
<td>
<%#Eval("UserName")%>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("ImageName"), new DataColumn("UserName"), new DataColumn("Name") });
dt.Rows.Add(1, "Chrysanthemum.jpg", "Mic22", "Micah David");
dt.Rows.Add(1, "Penguins.jpg", "Mic", "Micah");
Repeater1.DataSource = dt;
Repeater1.DataBind();
}
}
Screenshot
