How can I add a custom prompt box to ASP. NET tables or controls?

ASPX page:

<A href = # onclick = 'play ("<% # databinder. eval (container. dataitem," mid ") %>"); Return false ;'
Onmouseover = 'showtip2 (this, poptip, "Song name: <% # databinder. eval (container. dataitem," mname ") %>"
+ "<Br> album: <% # databinder. eval (container. dataitem," cname ") %>"
+ "<Br> ARTIST: <% # databinder. eval (container. dataitem," msinger ") %>"
+ "<Br> clicks: <% # databinder. eval (container. dataitem," mhits ") %>"
+ "& Nbsp; | & nbsp; <% # databinder. eval (container. dataitem," mstar ") %> Star"
+ "<Br> added by: <% # databinder. eval (container. dataitem," uname ") %>"
+ "<Br> Add time: <% # databinder. eval (container. dataitem," mtime ") %> ")'
Onmouseout = "hidetip (this, poptip, event)">

++ ++
The following is the JS part. Save it as a JS file with the corresponding name.

document. writeln (" ");
document. writeln ("

");
var popup_menu = NULL;
document. onclick = new function ("showpopupmenu (null)")

Function showpopupmenu (El, M, cuuid, user ){
If (m ){
M. style. Display = '';
M. style. Left = getpos (El, "Left") + El. offsetwidth;
M. style. Top = getpos (El, "TOP ");
M. innerhtml = "<a href = http://alumni.chinaren.com/online/online_sendmsg.jsp? Classuuid = "+ cuuid +" & towho = "+ User +" class = cla2> · 123123 </a> <br> ";
M. innerhtml + = "<a href = http://alumni.chinaren.com/class/class_personal.jsp? Userid = "+ User +" & classuuid = "+ cuuid +" & quuid = 1 class = cla2> 123123124 </a> ";
}
If (M! = Popup_menu) & (popup_menu) popup_menu.style.display = 'none ';
Popup_menu = m;
}

Function hidepopupmenu (El, M, e ){
VaR CX, Cy;
If (! E ){
Cx = Window. event. X;
Cy = Window. event. Y;
} Else {
Cx = E. clientx;
Cy = E. clienty;
}

If (El & M. style. Display = ''){
If (document. Body. scrollleft + cx> El. offsetleft)
& (Document. Body. scrollleft + cx <El. offsetleft + El. offsetwidth)
& (Document. Body. scrolltop + cy> El. offsettop)
& (Document. Body. scrolltop + cy <El. offsettop + El. offsetheight)
| (Document. Body. scrollleft + cx> M. offsetleft)
& (Document. Body. scrollleft + cx <M. offsetleft + M. offsetwidth)
& (Document. Body. scrolltop + cy> M. offsettop)
& (Document. Body. scrolltop + cy <M. offsettop + M. offsetheight )){
} Else {
M. style. Display = 'none ';
}
}
}

Function DN (){}

//////////////////////////////////////// //////////////////////////////////

Document. writeln ("<style>. tipdiv {font-family: verdana, Arial, Helvetica; font-size: 12px; color: black; Background-color: lightyellow; Border: Black 1px solid; padding: 1px ;} </style> ");
Document. writeln ("<Div id = poptip class = tipdiv style = 'position: absolute; display: none; 'onmouseout = 'hideself (this, event) '> </div> ");

VaR popup_tip = NULL;

Function getpos (El, sprop ){
VaR IPOs = 0;
While (El! = NULL ){
IPOs + = El ["offset" + sprop];
El = El. offsetparent;
}
Return IPOs;
}

Function showtip (El, M, tiparr ){
Tiparray = eval (tiparr );
If (tiparray. length> 0 ){
If (m ){
M. style. Display = '';
M. style. Left = getpos (El, "Left ");
M. style. Top = getpos (El, "TOP") + El. offsetheight;
VaR Title = tiparray [0];
VaR detail = tiparray [1];
If (M. innerhtml. Length <1 ){
M. innerhtml + = "<Table width = 200 border = 0 cellspacing = 0 cellpadding = 0 style = 'font-size: 11px '> \
<Tr> <TD colspan = 3 align = center> <B> <font color = green> "+ title +" </font> </B> </TD> </ tr> \
<Tr> <TD width = 6> </TD> <TD width = 186 Height = 1 bgcolor = Black> </TD> <TD width = 8> </TD> </tr> \
<Tr> <TD colspan = 3 Height = 2> </TD> </tr> \
<Tr> <TD> </TD> <TD> "+ detail +" </TD> </tr> \
</Table> ";
}
}
}
If (M! = Popup_tip) & (popup_tip) popup_tip.style.display = 'none ';
Popup_tip = m;
}

VaR waittimer = "";
VaR intervalseconds = 2000;

Function starttimer (El, M, tiparr ){
If (waittimer = ""){
Waittimer = Window. setinterval ("showtip3 (" + EL + "," + M + "," + tiparr + ")", intervalseconds );
} Else {
Stoptimer ();
}
}

Function stoptimer (){
If (waittimer! = ""){
Window. clearinterval (waittimer );
Waittimer = "";
}
}

Function showtip3 (El, M, tiparr ){
Tiparray = eval (tiparr );
If (tiparray. length> 0 ){
If (m ){
M. style. Display = '';
M. style. Left = getpos (El, "Left") + El. offsetwidth;
M. style. Top = getpos (El, "TOP ");
VaR Title = tiparray [0];
VaR detail = tiparray [1];
If (M. innerhtml. Length <1 ){
M. innerhtml + = "<Table width = 200 border = 0 cellspacing = 0 cellpadding = 0 style = 'font-size: 11px '> \
<Tr> <TD colspan = 3 align = center> <B> <font color = green> "+ title +" </font> </B> </TD> </ tr> \
<Tr> <TD width = 6> </TD> <TD width = 186 Height = 1 bgcolor = Black> </TD> <TD width = 8> </TD> </tr> \
<Tr> <TD colspan = 3 Height = 2> </TD> </tr> \
<Tr> <TD> </TD> <TD> "+ detail +" </TD> </tr> \
</Table> ";
VaR dist2bottom = Document. Body. scrolltop + document. Body. offsetheight-M. offsettop;
If (dist2bottom <El. offsetheight ){
M. style. pixeltop = M. style. pixeltop-M. offsetheight;
} Else if (dist2bottom <M. offsetheight ){
M. style. pixeltop = M. style. pixeltop-M. offsetheight + El. offsetheight-5;
If (M. offsettop <document. Body. scrolltop ){
M. style. pixeltop = M. style. pixeltop + document. Body. scrolltop;
}
}
}
}
}
If (M! = Popup_tip) & (popup_tip) popup_tip.style.display = 'none ';
Popup_tip = m;
}

Function showtip2 (El, M, tipstr ){
If (tipstr. length> 1 ){
If (m ){
M. style. Display = '';
M. style. Left = getpos (El, "Left") + El. offsetwidth;
M. style. Top = getpos (El, "TOP") + El. offsetheight;
If (M. innerhtml. Length <1 ){
M. innerhtml = tipstr;
}
}
}
If (M! = Popup_tip) & (popup_tip) popup_tip.style.display = 'none ';
Popup_tip = m;

}

Function hidetip (El, M, e ){
VaR CX, Cy;
If (! E ){
Cx = Window. event. X;
Cy = Window. event. Y;
} Else {
Cx = E. clientx;
Cy = E. clienty;
}

If (El & M. style. Display = ''){
If (document. Body. scrollleft + cx> El. offsetleft)
& (Document. Body. scrollleft + cx <El. offsetleft + El. offsetwidth)
& (Document. Body. scrolltop + cy> El. offsettop)
& (Document. Body. scrolltop + cy <El. offsettop + El. offsetheight)
| (Document. Body. scrollleft + cx> M. offsetleft)
& (Document. Body. scrollleft + cx <M. offsetleft + M. offsetwidth)
& (Document. Body. scrolltop + cy> M. offsettop)
& (Document. Body. scrolltop + cy <M. offsettop + M. offsetheight )){
} Else {
M. style. Display = 'none ';
M. innerhtml = "";
}
}
}

Function hideself (M, e ){
VaR CX, Cy;
If (! E ){
Cx = Window. event. X;
Cy = Window. event. Y;
} Else {
Cx = E. clientx;
Cy = E. clienty;
}

If (M. style. display = '') {
If (document. body. scrollleft + cx> = m. offsetleft)
& (document. body. scrollleft + cx <= m. offsetleft + M. offsetwidth)
& (document. body. scrolltop + cy> = m. offsettop)
& (document. body. scrolltop + cy <= m. offsettop + M. offsetheight) {
}else {
M. style. display = 'none';
M. innerhtml = "";
}< BR >}