Индивидуальный стиль для всплывающей подсказки tooltip

[sm13]

Версия ocstore 2.3.0.2

Всем привет по умолчанию стили для tooltip находятся в файле bootstrap.min.css во время работы над сайтом возникла необходимость установить для некоторых кнопок индивидуальный стиль попробовал вот таким образом

<button type="button" class="red" data-toggle="tooltip" data-placement="right" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" class="green" data-toggle="tooltip" data-placement="right" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-refresh"></i></button>	

то есть добавил классы и расположение подсказки справа, в файле стилей stylesheet.css добавил

.red.tooltip-inner {
    background-color:red !important;
  }
.red.tooltip.right .tooltip-arrow {
  border-right-color: red !important;
}
.green.tooltip-inner {
    background-color:green !important;
  }
.green.tooltip.right .tooltip-arrow {
  border-right-color: green !important;
} 

изменений не произошло, никто не подскажет в чем проблема в синтаксисе css или в неправильной разметке? Как можно решить этот вопрос. Спасибо.

 

 

[florapraktik]

Как можно решить этот вопрос.

 

Обычно в первую очередь советуют чистить кэш и историю браузера (либо смотреть в режиме инкогнито).

 

Во вторую очередь, посмотрите, что написано про стили в консоле разработчика (F12) если есть синтаксические ошибки ssc там будет написано.

На вскидку мне показалось, что Вы что-то перемудрили с вложенностью классов.

Змінено 17 січня 2017 користувачем florapraktik