Question

我在指令中使用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等

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

Answer 1

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

使用!important

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

使用更高的特异性

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

Article on Specificity

您无需修改任何boostrap文件。即使在注释中提到的js文件中，css类也没有，只是在元素上设置class属性。

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

<强>自举-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样式将被覆盖。

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

1 个答案: