Bootstrap工具提示动态CSS规范

Question

Bootstrap default tooltip template is black box and white text. I can change .tooltip css class like this: (White background.)

.tooltip{position:absolute;display:none;color:#333;text-align:left;font-size:0.9em;width:250px;}
.tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
.tooltip.top{margin-top:-10px;text-align:center}
.tooltip.top{margin-top:-10px;text-align:center}
.tooltip.right{margin-left:10px}
.tooltip.bottom{margin-top:10px;text-align:center}
.tooltip.left{margin-left:-10px;text-align:right; position: absolute}
.tooltip-inner{display:inline-block;padding:10px;color:#666;background-color:white}
.tooltip-arrow{position:absolute;width:10px;height:0;}
.tooltip.top .tooltip-arrow{bottom:-5px;left:50%;margin-left:-5px;border-top-color:white;border-width:5px 5px 0}
.tooltip.right .tooltip-arrow{top:50%;left:-5px;margin-top:-5px;border-right-color:white;border-width:5px 5px 5px 0}
.tooltip.left .tooltip-arrow{top:50%;right:-5px;margin-top:-5px;border-left-color:white;border-width:5px 0 5px 5px}
.tooltip.bottom .tooltip-arrow{top:-5px;left:50%;margin-left:-5px;border-bottom-color:white;border-width:0 5px 5px}

I should change template of tooltip dynamically in angular directive.

angular.module("app", []).directive("tooltip", function(){
    return {
        restrict: "A",
        scope: {
            title: "@",
            template: "@"
        },
        link: function(scope, element){
            $(element).tooltip({
                title: scope.title,
                placement: "right",
            });            
        }
    }
})

For example red-tooltip, blue-tooltip, ....

<div ng-app="app">
    <a href="#" tooltip title="Title-1" template="red-tooltip">Title-1</a>
    <a href="#" tooltip title="Title-2" template="blue-tooltip">Title-2</a>
</div>

I could not apply different overriden tooltip css classes.

DEMO is here.

Answer 1

Just change your link function to

    link: function(scope, element, attrs){
        $(element).tooltip({
            title: scope.title,
            placement: "right",
        }).addClass(attrs.template);
    }

Answer 2

When it comes to Tooltips, it's not just about a single element, you need to style two different elements - arrow element and box element.

As you can see here , the rendered markup for Tooltip contains two divs- tooltip-arrow & tooltip-inner , so you need to style both of them for the complete tooltip to be of same color.

Before that, you need to identify the information about type of Tooltip (red or blue) you want after the rendering. You can do this in 2 ways

1. Add a CSS class to the element as shown in Ivan's answer like below

    link: function(scope, element, attrs){ $(element).tooltip({ title: scope.title, placement: "right", }).addClass(attrs.template); } 

2. Use the template attribute from your original markup and then modify your CSS selectors accordingly.

I prefer class-selectors instead of attribute-selectors, so I defined the styles for your red Tooltip like below.

.red-tooltip + .tooltip.right .tooltip-arrow{ 
    border-right-color: red; 
}

.red-tooltip + .tooltip .tooltip-inner{ 
    background-color: red ; 
    color: white;
}

We're using adjacent selector here to find the sibling of .red-tooltip class with a .tooltip class which has both .tooltip-arrow & .tooltip-inner divs. With that, both the arrow and inner divs will have same color and you will have your red-tooltip.

Here's a sample Fiddle with the above mentioned changes.

Note : The hard part with Tooltips is styling Arrow elements. For each specific position like top, right, bottom, left - we need to write separate styles for border-colors. In your case as you're using right as placement for Tooltip, I have border-right-color for tooltip-arrow class. In case you want to support all the other placements, you need to write styles for all those placements like below.

.red-tooltip + .tooltip.left .tooltip-arrow{ 
    border-left-color: red; 
}

.red-tooltip + .tooltip.bottom .tooltip-arrow{ 
    border-bottom-color: red; 
}

Hope this helps :)

Answer 3

Just change your css. goto your jsfiddle link and copy & paste bellow class

.tooltip-inner {background-color: #f00;}

your problems is solved i think.