改变不透明度属性和应用梯度引导工具提示

Changing opacity property and apply gradient to Bootstrap tooltip

本文关键字：工具提示 应用 不透明度 属性 改变      更新时间：2023-09-26

在我的MVC3项目中(使用twitter Bootstrap)，我有一个带有两个单选按钮的页面。当将鼠标悬停在第二个视图上时，视图将显示一个Bootstrap工具提示。另外，我有一个JS函数来改变这个工具提示的CSS外观，把它变成黄色。

我想通过添加一些css属性到我的JS函数来删除透明度和应用梯度。像这样:

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

我已经试了一千种方法，但我不能。你能帮帮我吗?

提前感谢!!

我radiobutton

: 

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

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

)

您可以使用标识符:.tooltip.in

来改变工具提示的不透明度。

如果你想让它完全不透明只需使用:

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

已解决。

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

相关文章：