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指令中动态更改工具提示的模板。

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

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

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

DEMO is here.

Answer 1

只需将链接功能更改为

即可

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

Answer 2

说到工具提示，它不只是一个元素，你需要设置两个不同的元素 - arrow元素和box元素。

正如您所看到的here，Tooltip的渲染标记包含两个 divs- tooltip-arrow＆amp; tooltip-inner，因此您需要设置两者的样式，以使完整的工具提示具有相同的颜色。

在此之前，您需要确定渲染后所需的工具提示（红色或蓝色）类型的信息。你可以用两种方式做到这一点

在元素中添加一个CSS类，如Ivan的答案所示以下

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

使用原始标记中的template属性，然后使用相应地修改CSS选择器。

我更喜欢类选择器而不是属性选择器，所以我定义了您的红色工具提示的样式如下所示。

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

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

我们在此处使用相邻选择器来查找.red-tooltip类的同级，其中.tooltip类同时包含.tooltip-arrow和.tooltip-inner right div。这样，箭头和内部div都将具有相同的颜色，您将获得红色工具提示。

以下是带有上述更改的示例Fiddle。

注意： 使用工具提示的难点部分是造型箭头元素。对于每个特定位置，如顶部，右侧，底部，左侧 - 我们需要为边框颜色编写单独的样式。在您使用border-right-color作为工具提示的展示位置的情况下，我tooltip-arrow类.red-tooltip + .tooltip.left .tooltip-arrow{ border-left-color: red; } .red-tooltip + .tooltip.bottom .tooltip-arrow{ border-bottom-color: red; }。如果您想支持所有其他展示位置，则需要为所有展示位置编写样式，如下所示。

nn_poll

希望这会有所帮助：）

Answer 3

只需改变你的CSS。转到你的jsfiddle链接并复制＆amp;粘贴波纹管类

.tooltip-inner {background-color：＃f00;}

我认为你的问题已经解决了。

Bootstrap工具提示动态css规范

3 个答案: