Download Jquery Tooltipster from HERE
IN TOOLTIPS.ASPX
.CS
to generate dynamic linkbutton
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("your connection");
con.Open();
string str = "select * from test";
SqlCommand cmd = new SqlCommand(str, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
for (int i = 0; i < dt.Rows.Count; i++)
{
LinkButton ll = new LinkButton();
ll.ID = dt.Rows[i]["id"].ToString();
ll.Text = dt.Rows[i]["bio"].ToString();
ll.Attributes.Add("onmouseover","javascript:return hv(id);");
ll.Attributes.Add("onmouseout", "javascript:return hv1(id);");
div1.Controls.Add(ll);
Literal lit = new Literal();
lit.Text = "<br/>";
div1.Controls.Add(lit);
}
in ASPX page
(this will fetch image and details from find_data.aspx page and show in tooltipster span)
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
<script type="text/javascript">
function hv1(id) {
$('.tooltip').tooltipster('destroy');
}
</script>
<script type="text/javascript">
function hv(id) {
var h1 = null;
if (XMLHttpRequest) {
h1 = new XMLHttpRequest();
}
h1.open('GET', 'find_data.aspx?data=' + id, true)
h1.send();
h1.onreadystatechange = function () {
if (h1.readyState == 4) {
var res = h1.responseText;
var update = new Array();
update = res.split('|$|');
$('#' + id).tooltipster({
content: $('<span><img src="' + update[0] + '" /> <strong>"' + update[1] + '"</strong></span>')
});
}
}
}
</script>
</head>
IN Find_Data.ASPX
protected void Page_Load(object sender, EventArgs e)
{
st1 = Request.QueryString["fname"];
SqlConnection con = new SqlConnection("connection");
con.Open();
string[] x = st1.Split('_');
string y = x[1];
string str = "select * from Detail where AuId ='" + y[0]+ "'";
SqlCommand cmd = new SqlCommand(str, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
if(dt.Rows.Count>0)
{
Response.Write(dt.Rows[0]["Image"].ToString());
Response.Write("|$|");
Response.Write(dt.Rows[0]["Details"].ToString());
Response.End();
}
con.Close();
}
IN TOOLTIPS.ASPX
.CS
to generate dynamic linkbutton
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("your connection");
con.Open();
string str = "select * from test";
SqlCommand cmd = new SqlCommand(str, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
for (int i = 0; i < dt.Rows.Count; i++)
{
LinkButton ll = new LinkButton();
ll.ID = dt.Rows[i]["id"].ToString();
ll.Text = dt.Rows[i]["bio"].ToString();
ll.Attributes.Add("onmouseover","javascript:return hv(id);");
ll.Attributes.Add("onmouseout", "javascript:return hv1(id);");
div1.Controls.Add(ll);
Literal lit = new Literal();
lit.Text = "<br/>";
div1.Controls.Add(lit);
}
in ASPX page
(this will fetch image and details from find_data.aspx page and show in tooltipster span)
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
<script type="text/javascript">
function hv1(id) {
$('.tooltip').tooltipster('destroy');
}
</script>
<script type="text/javascript">
function hv(id) {
var h1 = null;
if (XMLHttpRequest) {
h1 = new XMLHttpRequest();
}
h1.open('GET', 'find_data.aspx?data=' + id, true)
h1.send();
h1.onreadystatechange = function () {
if (h1.readyState == 4) {
var res = h1.responseText;
var update = new Array();
update = res.split('|$|');
$('#' + id).tooltipster({
content: $('<span><img src="' + update[0] + '" /> <strong>"' + update[1] + '"</strong></span>')
});
}
}
}
</script>
</head>
IN Find_Data.ASPX
protected void Page_Load(object sender, EventArgs e)
{
st1 = Request.QueryString["fname"];
SqlConnection con = new SqlConnection("connection");
con.Open();
string[] x = st1.Split('_');
string y = x[1];
string str = "select * from Detail where AuId ='" + y[0]+ "'";
SqlCommand cmd = new SqlCommand(str, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
if(dt.Rows.Count>0)
{
Response.Write(dt.Rows[0]["Image"].ToString());
Response.Write("|$|");
Response.Write(dt.Rows[0]["Details"].ToString());
Response.End();
}
con.Close();
}
