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.

score 8 · Accepted Answer · answered Feb 24 '13 at 17:21

8

Just use $(document).ready

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

answered Feb 24 '13 at 17:21

John Conde

217,595
99
455
496

score 8 · Answer 2 · edited May 23 '17 at 12:10

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 ui tooltip having both ui-classes and your custom class .
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" />

jquery ui tooltip custom class on page load

2 Answers2

Linked