更改不透明度属性并将渐变应用到 Bootstrap 工具提示答案

【问题标题】：Changing opacity property and apply gradient to Bootstrap tooltip更改不透明度属性并将渐变应用到 Bootstrap 工具提示
【发布时间】：2013-03-17 13:30:06
【问题描述】：

在我的 MVC3 项目中（使用 Twiter Bootstrap）我有一个带有两个单选按钮的页面。将鼠标悬停在第二个视图上时，视图会显示 Bootstrap 工具提示。此外，我还有一个 JS 函数，可以更改该工具提示的 CSS 外观，将其变为黄色。

我想通过向我的 JS 函数添加一些 css 属性来移除透明度并应用渐变。像这样的：

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')});
});

更新：几乎解决了。设置渐变：

$('.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')

但我不能让它完全不透明:(

【问题讨论】：

你可以这样做： $('.tooltip-inner').css({ 'background-color': color, 'color': textcolor, 'font-weight': 'bold' });
@karaxuna 谢谢，但这只会优化现有的 JS 代码，并不能解决我的问题。
我知道它不能解决你的问题 :)

标签： javascript css asp.net-mvc twitter-bootstrap

【解决方案1】：

您可以使用标识符更改工具提示的不透明度：.tooltip.in

因此，如果您希望它完全不透明，只需使用：

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

【讨论】：

【解决方案2】：

解决了。

bootstrap.css 与 javascript 中定义的 CSS 样式重叠，所以我更改了 bootstrap.css 中的 opacity 值，但是有没有办法在不修改 CSS 的情况下做到这一点？

【讨论】：