ASP.NET tooltip alternative: Cool DHTML Tooltip II – Part 3

In Part 1 and Part 2, I talked about how to use Cool DHTML Tooltip II to replace ASP.NET built-in tooltip for better user experience. However, you may notice that if you use Cool DHTML Tooltip II in an AJAX ModalPopup, the tooltip is displayed underneath the ModalPopup. It turns out that when the AJAX ModalPopup is generated, its z-index is always reset to 100001 so the popup window is always on top of other elements. This issue can be easily fixed by modifying the style of Cool DHTML Tooltip II. Here is the modified style:

/* The following style is for DHTML Tooltip II from dynamicdrive.com */
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100002; /* This will ensure that it works in AJAX ModalPopup */
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 100002; /* This will ensure that it works in AJAX ModalPopup */
visibility: hidden;
}

The only change above is the z-index value, which is larger than the z-index of AJAX ModalPopup (100001).