[データタイプ]をサポートするためにブートストラップのツールチップを拡張します

Question

私は現在、次のjQueryを使用してdata-type属性を使用してカスタムクラスを指定するオプション付きでブートストラップのtooltipを呼び出しています。私が行うことを好むだろうどのような

$('[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の基本フレームワークを拡張してカスタマイズすることで、Bootstrap 2.3.2がかなり気の利いたトリックを許していることは知っていますが、3.xや4.xに特有の答えは見つけられないようです。ライブたとえば

、訪問：http://codepen.io/rkieru/pen/OXkdjV

Answer 1

を、この機能をサポートするために、ブートストラップツールチップJavascriptを拡張する方法を決定しようとした後、私はまだ必要な着色を提供するために、data-*に依存している別のCSSのみのソリューションつまずい。ここから

/* 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=*を追加するのと同じくらい簡単になる：

ブートストラップは、私たちがそうのよう+セレクタを利用することができます直接data-toggle="tooltip"を持つ要素の後にツールチップを生成し、 ：

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