Question

我目前正在使用以下jQuery来调用Bootstrap的tooltip，并选择通过data-type属性指定自定义类（用于重新着色工具提示）。

   $('[data-toggle="tooltip"]').each(function(){
        var options = { 
            html: true 
        };

        if ($(this)[0].hasAttribute('data-type')) {
            options['template'] = 
                '<div class="tooltip ' + $(this).attr('data-type') + '" role="tooltip">' + 
                '   <div class="tooltip-arrow"></div>' + 
                '   <div class="tooltip-inner"></div>' + 
                '</div>';
        }

        $(this).tooltip(options);
    });

我更喜欢做的是有一种方法来实际扩展tooltip以支持这一点，而无需在事件级别进行所有额外的自定义，甚至可以将颜色量化为选项。我知道Bootstrap 2.3.2允许扩展和定制Bootstrap的基础框架，但是我似乎无法找到特定于3.x甚至4.x的任何答案。

有关实例，请访问：http://codepen.io/rkieru/pen/OXkdjV

Answer 1

在尝试确定扩展Bootstraps Tooltip Javascript以支持此功能的方法之后，我偶然发现了另一个仅依赖于CSS的解决方案仍然依赖于data-*来提供必要的着色。

Bootstrap直接在带有data-toggle="tooltip"的元素之后生成工具提示，因此我们可以使用+选择器，如下所示：

/* Apply .btn-primary Coloring */
[data-color*="primary"] + .tooltip .tooltip-inner { background-color: #337ab7; }
[data-color*="primary"] + .tooltip.top > .tooltip-arrow { border-top-color: #337ab7; }
[data-color*="primary"] + .tooltip.right > .tooltip-arrow { border-right-color: #337ab7; }
[data-color*="primary"] + .tooltip.bottom > .tooltip-arrow { border-bottom-color: #337ab7; }
[data-color*="primary"] + .tooltip.left > .tooltip-arrow { border-left-color: #337ab7; }

/* Apply .btn-info Coloring */
[data-color*="info"] + .tooltip .tooltip-inner { background-color: #31b0d5; }
[data-color*="info"] + .tooltip.top > .tooltip-arrow { border-top-color: #31b0d5; }
[data-color*="info"] + .tooltip.right > .tooltip-arrow { border-right-color: #31b0d5; }
[data-color*="info"] + .tooltip.bottom > .tooltip-arrow { border-bottom-color: #31b0d5; }
[data-color*="info"] + .tooltip.left > .tooltip-arrow { border-left-color: #31b0d5; }

/* Apply .btn-success Coloring */
[data-color*="success"] + .tooltip .tooltip-inner { background-color: #449d44; }
[data-color*="success"] + .tooltip.top > .tooltip-arrow { border-top-color: #449d44; }
[data-color*="success"] + .tooltip.right > .tooltip-arrow { border-right-color: #449d44; }
[data-color*="success"] + .tooltip.bottom > .tooltip-arrow { border-bottom-color: #449d44; }
[data-color*="success"] + .tooltip.left > .tooltip-arrow { border-left-color: #449d44; }

/* Apply .btn-warning Coloring */
[data-color*="warning"] + .tooltip .tooltip-inner { background-color: #ec971f; }
[data-color*="warning"] + .tooltip.top > .tooltip-arrow { border-top-color: #ec971f; }
[data-color*="warning"] + .tooltip.right > .tooltip-arrow { border-right-color: #ec971f; }
[data-color*="warning"] + .tooltip.bottom > .tooltip-arrow { border-bottom-color: #ec971f; }
[data-color*="warning"] + .tooltip.left > .tooltip-arrow { border-left-color: #ec971f; }

/* Apply .btn-danger Coloring */
[data-color*="danger"] + .tooltip .tooltip-inner { background-color: #d9534f; }
[data-color*="danger"] + .tooltip.top > .tooltip-arrow { border-top-color: #d9534f; }
[data-color*="danger"] + .tooltip.right > .tooltip-arrow { border-right-color: #d9534f; }
[data-color*="danger"] + .tooltip.bottom > .tooltip-arrow { border-bottom-color: #d9534f; }
[data-color*="danger"] + .tooltip.left > .tooltip-arrow { border-left-color: #d9534f; }

从这里开始就像将data-color=*添加到相应的触发器元素一样简单，如下所示：

<div data-toggle="tooltip" data-color="success" title="I will be green!">Test</div>

扩展Bootstrap工具提示以支持[数据类型]

1 个答案: