Переопределение стилей CSS виджета JQuery UI Tooltip

<li> 
    <div class="i1"> 
     <a href="#inf-1"title="ΕΝΤΟΠΙΣΜΟΣ"> 
      <span class="ui-icon ui-icon-search"></span> 
     </a> 
    </div> 
</li> 
<li><a href="#inf-2"title="ΠΛΗΡΟΦΟΡΙΕΣ"><span class="ui-icon ui-icon-info"></span></a></li> 
<li><a href="#inf-3"title="ΕΠΙΠΕΔΑ"><span class="ui-icon ui-icon-copy"></span></a></li>

, и я написал следующий CSS на основе их примеру, и он работает как шарм:

.tooltip { 
    display:none; 
    background: black; 
    font-size:12px; 
    height:10px; 
    width:80px; 
    padding:10px; 
    color:#fff; 
    z-index: 99; 
    bottom: 10px; 
    border: 2px solid white; 
/* for IE */ 
    filter:alpha(opacity=80); 
    /* CSS3 standard */ 
    opacity:0.8; 
}

Но у меня есть 3-4 подсказки, которые я хочу посмотреть по-другому (например, пример html выше), поэтому я завернул их в класс и сделал это:

.i1 .tooltip { 
    display:none; 
    background: red; 
    font-size:12px; 
    height:40px; 
    width:80px; 
    padding:20px; 
    color:#fff; 
    z-index: 99; 
    bottom: 10px; 
    left: 50px important!; 
    border: 2px solid white; 
/* for IE */ 
    filter:alpha(opacity=80); 
    /* CSS3 standard */ 
    opacity:0.8; 
}

, который абсолютно ничего не делает. Как я могу переопределить общий .tooltip, чтобы настроить определенные подсказки по-разному?

Заранее спасибо

источник

2011-01-24 elasticrash

Что именно вы подразумеваете под оберткой, является охватывающим элементом или просто другим классом, применяемым к всплывающей подсказке? –

Текущий принятый ответ очень устарел, и ссылка мертва. См. Наивысший проголосовавший ответ ниже для текущей рабочей информации –

Для тех, кто хочет применить пользовательский класс к новому подсказке виджета (JQuery UI 1.9.1), extraClass, кажется, не работает больше, но есть новая опция называется tooltipClass.

$('.selector').tooltip({ 
     tooltipClass: "your_class-Name", 
});

В целях устранения возможных конфликтов с помощью CSS JQuery, вы можете добавить !important до конца строки в вашем CSS. Благодаря @sisharp за указание, что из :-)

источник

2012-10-27 21:00:37

Мое удовольствие: -D (Особенно, если это может спасти кому-то время, которое потребовалось мне, чтобы понять это ;-)) –

Это решение не работает. См. Мое решение ниже – FredTheLover

Он добавляет новый класс, но не меняет никакого стиля! –

На самом деле его

$(".selector").tooltip("option", "tooltipClass", "custom-tooltip-styling");

См here

источник

2013-06-21 19:14:08 FredTheLover

Это то же самое, что и выше. Ссылка, которую вы предоставляете, показывает как ... – sisharp

Попытка построить на отличный ответ выше, я пытался стилизовать пузырь и получить избавиться от старого ...

Если вы новичок, как я (в других случаях простая задача занимает часы), приятно иметь ответ одновременно в одном и том же месте :) Вот решение из нескольких источников, в том числе на этот вопрос:

<a href="#" title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a>

Пробел удаляет пузырь браузера.

CSS-для нового пузыря, как например:

.mytooltip:hover:after{ 
    background: #333; 
    background: rgba(0,0,0,.9); 
    border-radius: 5px; 
    bottom: 26px; 
    color: rgb(255, 77, 85); 
    content: attr(title); 
    right: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 220px;} 
.mytooltip:hover:before{ 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 6px 6px 0 6px; 
    bottom: 20px; 
    content: ""; 
    right: 50%; 
    position: absolute; 
    z-index: 99; 
} 

.mytooltip { 
    radius: 4px !important; 
    background-color: black; 
    color: rgb(255, 77, 85) !important; 
    padding: 5px 20px; 
    border-radius: 20px; 
    margin: 50px; 
    text-align: center; 
    font: bold 14px ; 
    font-stretch: condensed; 
    text-decoration: none; 
    box-shadow: 0 0 10px black; 
}

и сценарий выше, вставляется в сноске:

<script> 
$('.selector').tooltip({ 
     tooltipClass: "mytooltip", 
}); 
</script>

Спасибо на этот вопрос, this и я забыл другой источник ,

источник

2016-09-28 21:43:50 user2060451

Я пробовал все варианты выше, и никто не работал для меня.

Я посмотрел в подсказке options docs, которые связаны с этой статьей о theming, после прочтения я попробовал это, который работал:

$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})

Тогда просто добавьте 2 классов CSS с моделированием:

my-custom-class-name { 
... 
} 
my-custom-class-name-content { 
... 
}

Обратите внимание, что вам, возможно, придется использовать! Важно в ваших пользовательских классах.

источник

2017-05-17 23:01:03 AmitF

Переопределение стилей CSS виджета JQuery UI Tooltip

ответ

Смежные вопросы