Steps are Below:-
1. Add script to Head on design page
<script type=”text/javascript” src=”js/jquery-1.4.1.min.js”></script>
<script type=”text/javascript”>
// Load this script once the document is ready
$(document).ready(function () {
// Get all the thumbnail
$(‘div.thumbnail-item’).mouseenter(function (e) {
// Calculate the position of the image tooltip
x = e.pageX – $(this).offset().left;
y = e.pageY – $(this).offset().top;
// Set the z-index of the current item,
// make sure it’s greater than the rest of thumbnail items
// Set the position and display the image tooltip
$(this).css(‘z-index’, ’15’)
.children(“div.tooltip”)
.css({ ‘top’: y + 10, ‘left’: x + 20, ‘display’: ‘block’ });
}).mousemove(function (e) {
// Calculate the position of the image tooltip
x = e.pageX – $(this).offset().left;
y = e.pageY – $(this).offset().top;
// This line causes the tooltip will follow the mouse pointer
$(this).children(“div.tooltip”).css({ ‘top’: y + 10, ‘left’: x + 20 });
}).mouseleave(function () {
// Reset the z-index and hide the image tooltip
$(this).css(‘z-index’, ‘1’)
.children(“div.tooltip”)
.animate({ “opacity”: “hide” }, “fast”);
});
});
</script>
2. Add Style for tooltip Design
<style>
.thumbnail-item
{
/* position relative so that we can use position absolute for the tooltip */
position: relative;
float: left;
margin: 0px 5px;
}
.thumbnail-item a
{
display: block;
}
.thumbnail-item img.thumbnail
{
border: 3px solid #ccc;
}
.tooltip
{
/* by default, hide it */
display: none; /* allow us to move the tooltip */
position: absolute; /* align the image properly */
padding: 8px 0 0 8px;
}
.tooltip span.overlay
{
/* the png image, need ie6 hack though */
/*background: url(images/overlay.png) no-repeat; /* put this overlay on the top of the tooltip image */
background: url(images/overlay.png) no-repeat;
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 350px;
height: 200px;
}
</style>
3. Add Design Page
<form id=”form1″ runat=”server”>
<div id=”allData” runat=”server”>
</div>
<div class=”clear”>
</div>
</form>
4. Now come to code behind Page
void LoadData()
{
con.Open();
SqlCommand cmd = new SqlCommand(“select * from ProductTable”, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
StringBuilder sb = new StringBuilder();
if (ds.Tables[0].Rows.Count > 0)
{
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
sb.Append(“<div class=’thumbnail-item’>”);
sb.Append(“<a href=’#’>”);
sb.Append(“<img src=” + ds.Tables[0].Rows[i][1].ToString() + ” class=’thumbnail’ /></a>”);
sb.Append(“<div class=’tooltip’ >”);
sb.Append(“<div >”);
sb.Append(“<table width=’100%’>”);
sb.Append(“<tr><td>Name</td><td>” + ds.Tables[0].Rows[i][2].ToString() + “</td></tr>”);
sb.Append(“<tr><td>Price</td><td>” + ds.Tables[0].Rows[i][3].ToString() + “</td></tr>”);
sb.Append(“<tr><td>Details</td><td>” + ds.Tables[0].Rows[i][4].ToString() + “</td></tr>”);
sb.Append(“<tr><td>Product Code</td><td>” + ds.Tables[0].Rows[i][5].ToString() + “</td></tr>”);
sb.Append(“</table>”);
sb.Append(“</div>”);
sb.Append(“<span class=’overlay’></span>”);
sb.Append(“</div>”);
sb.Append(“</div>”);
sb.Append(“<br />”);
}
}
con.Close();
allData.InnerHtml = sb.ToString();
}
5. Call above function on page load
SqlConnection con = new SqlConnection(“data source=.\\SQLExpress ;database=Practise ;integrated security=true”);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadData();
}
}
