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

我目前使用以下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

来源

2016-07-25 Robert C

试图确定一种扩展白手起家工具提示Javascript功能来支持此功能之后，我偶然发现了另一只CSS的解决方案，仍然依赖于data-*提供必要的着色。

引导与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>

来源

2016-07-27 16:51:45

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

回答

相关问题