AngularJs override tooltip bootstrap.css style

Question

I am using AngularUI Tooltip in a directive as below.

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

});

Instead of modifying the actual bootstrap.css class like

.tooltip-inner, .tooltip.top .tooltip-arrow ,etc

How can I use the same directive to overwrite with inline tooltip styling?

Patrick Evans · Accepted Answer · 2014-08-13 04:35:31Z

1

Instead of trying to add in inline styles just add the class to one of your own css files (ie create a bootstrap-override.css) and change the properties you wish to change. You might need to either use !important after the property value to make sure it overrides the others or use a higher specificity

Using !important

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

Using a higher specificity

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

Article on Specificity

You do not need to modify any of the boostrap files. The css classes aren't even in the js file you mention in the comments, that is just setting the class attribute on the element.

All you have to do is create a new css file, put the style you want to override in it in there, and use either the !important flag, or the higher specificity to override the bootstrap styles

bootstrap-override.css

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

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

Then in your html include the file after the boostrap files

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

This is all you have to do nothing else. And as long as you use the correct specificity or !important the styles will be overriden.

edited Aug 13, 2014 at 4:35

answered Aug 13, 2014 at 3:37

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ove Over a year ago

Do you mean copy and paste bootstrap.css into bootstrap-override.css and modify the properties? I thought there is a better way

Patrick Evans Over a year ago

No do not copy paste from the boostrap css file just make a new css file and put in that the classes you wish to override

ove Over a year ago

If i do that then i would need to use !important inside ui-bootstrap-tpls-0.10.0.js since that's where the css class is defined but i do not want to modify ui-bootstrap-tpls-0.10.0.js

Collectives™ on Stack Overflow

AngularJs override tooltip bootstrap.css style

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related