AngularJs覆蓋工具提示bootstrap.css樣式

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

專門性文章

您不需要修改任何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 個解決方案

解決方案1
1 已采納 2014-08-13 03:37:40

AngularJs覆蓋工具提示bootstrap.css樣式

問題描述

1 個解決方案

解決方案1 1 已采納 2014-08-13 03:37:40

解決方案1
1 已采納 2014-08-13 03:37:40