引导工具提示动态 css 规范答案

【问题标题】：Bootstrap tooltip dynamic css specification引导工具提示动态 css 规范
【发布时间】：2015-10-01 17:56:16
【问题描述】：

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

【问题讨论】：

你应该使用带有 !important 的额外 css 类

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

只需将链接功能更改为

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

【讨论】：

【解决方案2】：

说到工具提示，它不仅仅是一个元素，您需要为两个不同的元素设置样式 - arrow 元素和 box 元素。

如您所见here，Tooltip 的渲染标记包含两个 divs-tooltip-arrow & tooltip-inner，因此您需要为它们设置样式以使完整的工具提示具有相同的颜色。

在此之前，您需要确定渲染后所需的 Tooltip 类型（红色或蓝色）的相关信息。您可以通过 2 种方式做到这一点

向元素添加一个 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 div。这样，箭头和内部 div 将具有相同的颜色，并且您将获得红色工具提示。

这是一个示例Fiddle，上面提到的更改。

注意： 工具提示的难点在于设置箭头元素的样式。对于每个特定的位置，如上、右、下、左 - 我们需要为边框颜色编写单独的样式。在您的情况下，当您使用right 作为工具提示的位置时，我有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; 
}

希望这会有所帮助:)

【讨论】：

【解决方案3】：

只需更改您的 CSS。转到您的 jsfiddle 链接并复制和粘贴下面的类

.tooltip-inner {背景颜色：#f00;}

我想你的问题已经解决了。

【讨论】：