Изменение свойства непрозрачности и применение градиента к подсказке Bootstrap

В моем проекте MVC3 (используя Twiter Bootstrap) У меня есть страница с двумя переключателями. При наведении указателя мыши на второй отображается представление всплывающей подсказки Bootstrap. Кроме того, у меня есть функция JS, которая меняет внешний вид CSS этой всплывающей подсказки, превращая ее в желтый.Изменение свойства непрозрачности и применение градиента к подсказке Bootstrap

Я хотел бы удалить прозрачность и применить градиент, добавив некоторые свойства css в мою функцию JS. Что-то вроде этого:

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FCEEC1),color-stop(100%,#EEDC94));

Я пробовал тысячу способов, и я не могу. Не могли бы вы мне помочь?

Спасибо заранее!

Мой радиокнопку:

<span class="radio-button-revoked" title="CAUTION! Selecting this option will cause the revocation of the order delivery"> 
@Html.RadioButtonFor(model => model.Status, 0, new { style = "margin-top: 0px;" })</span><span class="text-error"><strong> Not delivered</strong> 
</span>

Мои JS:

function changeTooltipColorTo(color, textcolor) { 
    $('.tooltip-inner').css('background-color', color) 
    $('.tooltip-inner').css('color', textcolor) 
    $('.tooltip-inner').css('font-weight', 'bold') 
    $('.tooltip.top .tooltip-arrow').css('border-top-color', color); 
    $('.tooltip.right .tooltip-arrow').css('border-right-color', color); 
    $('.tooltip.left .tooltip-arrow').css('border-left-color', color); 
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color); 
} 

$(document).ready(function() { 
    $("[rel=tooltip]").tooltip(); 
    $('.radio-button-revoked').hover(function() {changeTooltipColorTo('#F89406','#404040')}); 
});

UPDATE: Почти решена. Установите градиент:

$('.tooltip-inner').css('background-image', '-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FCEEC1),color-stop(100%,#E4BF46))')

я заметил, что я могу играть с градиентом, установив значение от 0,1 до 1:

$('.tooltip-inner').css('opacity', '0.1') 

$('.tooltip-inner').css('opacity', '1')

Но я не могу сделать его полностью непрозрачным :(

источник

2013-03-27 equisde

Вы можете сделать это вместо: $ (» .tooltip-inner '). css ({' background-color ': color,' color ': textcolor,' font-weight ':' bold '}); – karaxuna

@karaxuna спасибо, но это только оптимизирует существующий JS-код, не решает мою проблему. – equisde

Я знаю, что это не решит вашу проблему :) – karaxuna

решаемые .

bootstrap.css перекрывал стиль CSS, определенный в javascript, поэтому я изменил значение непрозрачности в bootstrap.css, но есть ли способ сделать это без изменения CSS?

источник

2013-03-27 16:21:31 equisde

Вы можете изменить непрозрачность подсказки с помощью идентификатора: .tooltip.in

Итак, если вы хотите полностью непрозрачный просто использовать:

.tooltip.in { 
    opacity: 1; 
    filter: alpha(opacity=100); 
}

источник

2015-05-27 03:47:37 pauloz1890

Изменение свойства непрозрачности и применение градиента к подсказке Bootstrap

ответ

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