css - jquery ui tooltip custom class on page load

Question

I am using jquery ui tooltip on my textboxes and I have defined a custom class like this and

.ui-tooltip1 {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
    background-color:white !important; 
    color: Red !important;
}

I am using it like this:

         $(".phone").tooltip({
            tooltipClass: "ui-tooltip1"
        });

but this class is not applied when i first load the page. on page load default tooltip class is applied. How can i apply this class on tooltip when page loads ?

Please suggest.

Answer 1

Just use $(document).ready

$(document).ready(function() {
    $(".phone").tooltip({
        tooltipClass:"ui-tooltip1"
    });
});