css - ページ読み込み時のjquery uiツールチップカスタムクラス

Question

テキストボックスでjquery uiツールチップを使用しており、このようなカスタムクラスを定義しており、

.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;
}

私はこのように使用しています：

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

しかし、このクラスは、ページを最初にロードしたときに適用されません。ページ読み込み時にデフォルトのツールチップ クラスが適用されます。ページの読み込み時にツールチップにこのクラスを適用するにはどうすればよいですか?

提案してください。

Answer 1

私も同じ問題を抱えていました。ここで私を助けた
のは、jquery-ui ツールチップ クラスと独自のカスタム クラスの両方が tooltip 要素に割り当てられていることです。
この SO エントリ:複数の !重要なクラス宣言と優先順位が役に立ちました: 「同じプロパティが両方のルールで宣言されている場合、競合は最初に具体性によって解決され、次に CSS 宣言の順序に従って解決されます。クラス属性は関係ありません。」.

したがって、最初に ui-css を呼び出し、次に独自の 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" />

Answer 2

使うだけ$(document).ready

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