AngularJs 覆盖工具提示 bootstrap.css 样式答案

【问题标题】：AngularJs override tooltip bootstrap.css styleAngularJs 覆盖工具提示 bootstrap.css 样式
【发布时间】：2014-10-06 07:21:31
【问题描述】：

我在如下指令中使用 AngularUI Tooltip。

app.directive('customTooltip', function($compile) {
    return {
        link: function(scope, element, attrs) {
        var config = scope.$eval(attrs.appsTooltip);
        var htmlText = '<img src=\'../../../images/help_on.jpg\' tooltip="' + config.message + '" tooltip-placement="' + config.placement + '" />';
        element = element.append(htmlText);
        $compile(element.children())(scope);
    }
};

});

而不是像修改实际的 bootstrap.css 类

.tooltip-inner, .tooltip.top .tooltip-arrow 等

如何使用相同的指令来覆盖内联工具提示样式？

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap angularjs-directive

【解决方案1】：

不要尝试添加内联样式，只需将类添加到您自己的 css 文件之一（即创建一个 bootstrap-override.css）并更改您希望更改的属性。您可能需要在属性值之后使用!important 以确保它覆盖其他值或使用更高的特异性

使用!important

.tooltip-inner {
    width:150px !important;
}

使用更高的特异性

.someParentElementClass img.tooltip-inner {
    width:150px;
}

Article on Specificity

您不需要修改任何 boostrap 文件。 css 类甚至不在您在 cmets 中提到的 js 文件中，这只是在元素上设置了 class 属性。

您所要做的就是创建一个新的 css 文件，将要覆盖的样式放入其中，然后使用 !important 标志或更高的特异性来覆盖引导样式

bootstrap-override.css

.tooltip-inner {
    width:150px !important;
}

.tooltip.top {
    top:-100px !important;
}

然后在你的html中包含boostrap文件之后的文件

<head>
   <link rel="stylesheet" href="/boostrap.css" />
   <link rel="stylesheet" href="/boostrap-override.css" />
</head>

这就是你所要做的一切。只要您使用正确的特异性或!important，样式就会被覆盖。

【讨论】：

你的意思是将bootstrap.css复制并粘贴到bootstrap-override.css并修改属性吗？我认为有更好的方法
不，不要从 boostrap css 文件中复制粘贴，只需创建一个新的 css 文件并放入您希望覆盖的类
如果我这样做，那么我需要在 ui-bootstrap-tpls-0.10.0.js 中使用 !important，因为这是定义 css 类的地方，但我不想修改 ui-bootstrap -tpls-0.10.0.js