Как использовать подсказку jQueryUI вместе с моим собственным CSS

Question

Как использовать подсказку jQueryUI вместе с моим собственным CSS

0

Я использую jQueryUI tooltip и custom css для его форматирования. Всплывающая подсказка подходит, но не может аппроксимировать мой класс css поверх нее. Код:

$(document).ready(function () {
    $("#roles").tooltip({ content: "Start typing a name for the IT role you're staffing. There are 75 to choose from. If you're uncertain, start with something general like '<i>Manager</i>'" });    
});

HTML

<input id="roles" type="text" class="wGridPx_16"/>

CSS

<style>
        .ui-tooltip
        {
            font-size: 11px;
            color: #fff;
            text-shadow: 0 0 2px #000;
            padding: 4px 8px;
            border: 1px solid rgba(255,255,255,0.25);
            background-color: rgb(25,25,25);
            background-color: rgba(25,25,25,0.82);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            box-shadow: 0 0 3px #555;
            -webkit-box-shadow: 0 0 3px #555;
            -moz-box-shadow: 0 0 3px #555;
        }
    </style>

Пожалуйста помоги. Я проверил много Q/A-блогов на нем, как пользовательский класс jQuery ui tooltip на загрузке страницы, но мне ничего не помогло.

Arun P Johny 27 нояб. 2013, в 11:24

Источник

Теги:

javascript

jquery

html

css

jquery-ui

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-11-27T07-53-00.000Z

Вы можете использовать опцию tooltipClass

$(document).ready(function () {
    $("#roles").tooltip({
        content: "Start typing a name for the IT role you're staffing. There are 75 to choose from. If you're uncertain, start with something general like '<i>Manager</i>'",
        tooltipClass: 'my-class'
    });

});

тогда

.my-class.ui-tooltip {
    font-size: 11px;
    color: #fff;
    text-shadow: 0 0 2px #000;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-color: rgb(25, 25, 25);
    background-color: rgba(25, 25, 25, 0.82);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 3px #555;
    -webkit-box-shadow: 0 0 3px #555;
    -moz-box-shadow: 0 0 3px #555;
}

Демо: скрипка