Custom Tooltip on Image item of Datalist Control

Question

I have a datalist control in my usercontrol and I have icon image "detail.png" . now I want to show some customised tooltip (like this qTip_Tooltip ) on the click event of that image. the thing is the tooltip content should come from database.

I have 2 tables that comes in the picture.. 1. StudentMaster . 2. StudentCategoryMaster. before using tooltip, I had a seprate page where we can see the details of the perticular student, explained below.. When we have to see the detail of the perticular student, i have to pass 2 parameters, Viz. studentId & studentCategoryId. like this

aspx code

<a href='<%# FormatStudentId((int)Eval("studentId"), (int)Eval("studentCategoryId")) %>'>

.cs code

protected string FormatStudentId(int studentId, int studentCategoryId)
{
    return "StudentDetails.aspx?studentId=" + studentId.ToString() + "&studentCategoryId=" + studentCategoryId.ToString();
}

So, when we have to show the tooltiup, the tooltip must have been passed with these 2 ID's. So the dynamic tooltip scenario will come into the picture.

My question is, How to achieve this ? Please help me. Thank You for reading , I guess I was clear enuf, if not, ask me the detail, i will give you.

Answer 1

details.png will contain tooltip for a particular student? You can follow the same way your example does and Fill the p tag dynamically

Answer 2

Use, <AjaxControlToolkit:HoverMenuExtender> and edit the <div> in the <asp:Panel> as the way you want.

Like this..

<asp:Panel ID's ...>
<div style="">
<%#Eval("studentDescription")%>
<br />
</div>

Google for this extender, you will find so many nice examples.