AjaxToolkit:ValidatorCalloutExtender provides CssClass property to help you make your own style to display popup.
For example:
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="vceCUSIP" TargetControlID="reqCUSIP"
HighlightCssClass="validatorCalloutHighlight" CssClass="CustomValidatorCUSIP" PopupPosition="Left" />
But you not only re-defined css class CustomValidatorCUSIP but also re-defined all items in this style sheet. Another word, you must overwrite default style provides by ajaxToolkit:
<style id = "CUSIPStyle" type="text/css">
.CustomValidatorCUSIP
{
position: relative;
margin-left: 0px;
margin-top: 0px;
display: inherit;
}
.CustomValidatorCUSIP div
{
border: solid 1px Black;
position: relative; /*boder arrow
border: solid 1px red; */
background-color: #fcfdd8;
}
.CustomValidatorCUSIP td
{
border: solid 1px Black;
background-color: #fcfdd8;
}
.CustomValidatorCUSIP .ajax__validatorcallout_popup_table
{
display: none;
border: none;
background-color: transparent;
padding: 0px; /*
border: solid 1px red; */
}
.CustomValidatorCUSIP .ajax__validatorcallout_popup_table_row
{
vertical-align: top;
height: 100%;
background-color: transparent;
padding: 0px;
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_cell
{
width: 20px;
height: 100%;
text-align: right;
vertical-align: top;
border: none;
background-color: transparent;
padding: 0px;
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_table
{
height: 100%;
border: none;
background-color: transparent;
padding: 0px; /*chứa arrow
border: solid 1px green;
*/
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_table_row
{
background-color: transparent;
padding: 0px;
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_arrow_cell
{
padding: 8px 0px 0px 0px;
text-align: right;
vertical-align: top;
font-size: 1px;
border: none;
background-color: transparent;
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
{
font-size: 1px;
position: relative;
left: 1px;
border-bottom: none;
border-right: none;
border-left: none;
width: 15px;
background-color: transparent;
padding: 0px;
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div
{
height: 1px;
overflow: hidden;
border-top: none;
border-bottom: none;
border-right: none;
padding: 0px;
margin-left: auto; /*
border: solid 2px #3a6ea5;
*/
}
.CustomValidatorCUSIP .ajax__validatorcallout_error_message_cell
{
font-family: Verdana;
font-size: 10px;
padding: 5px;
border-right: none;
border-left: none;
width: 100%;
}
.CustomValidatorCUSIP .ajax__validatorcallout_icon_cell
{
width: 20px;
padding: 5px;
border-right: none;
}
.CustomValidatorCUSIP .ajax__validatorcallout_close_button_cell
{
vertical-align: top;
padding: 0px;
text-align: right;
border-left: none;
}
.CustomValidatorCUSIP .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
{
border: none;
text-align: center;
width: 10px;
padding: 2px;
cursor: pointer;
}
</style>