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-         


        

Answer 1

Just use $(document).ready

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

Answer 2

I had the same problem. Here what helped me:
Both the jquery-ui tooltip classes and your own custom class are assigned to the tooltip element .
This SO entry: Multiple !important class declarations and precedence helped me out: "If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.".

So I could solve the problem by first calling the ui-css and then my own css:

<link rel="stylesheet" href="../css/jquery_ui_1.10.1.css" type="text/css" />
<link rel="stylesheet" href="../css/myown.css" type="text/css" />