javascript - Bootstrap 工具提示动态 CSS 规范

Question

Bootstrap默认的工具提示模板是黑框和白色文本。我可以像这样更改 .tooltip css 类:(白色背景。)

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

我应该在 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",
            });            
        }
    }
})

例如红色工具提示、蓝色工具提示......

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

我无法应用不同的覆盖工具提示 CSS 类。

DEMO is here.

Answer 1

只需将链接功能更改为

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