ブートストラップ - 特定のツールチップをどのようにターゲットに設定するのですか？

Question

私のページにはいくつかのツールチップがありますが、それぞれの色が異なるようにしたいと思います。これをどうやってやりますか？私はそれがCSSの複雑なルートを介して可能だろうと思うが、私はもっと簡潔な何かを望んでいた。 （現時点でジャスト赤）

HTML

<div class="row redbg" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet"></div>  
<div class="row bluebg" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet"></div> 

はJavaScript

<script> 
    $(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
}) 
    </script> 

CSS

/* TOOL TIP */ 
.tooltip-inner { 
    background-color: red; 
    color: #fff; 
} 

.tooltip.top .tooltip-arrow { 
    border-top-color: red; 
} 

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

.tooltip.bottom .tooltip-arrow { 
    border-bottom-color: red; 
} 

.tooltip.left .tooltip-arrow { 
    border-left-color: red; 
} 
.tooltip-inner { 
    max-width: 350px; 
    /* If max-width does not work, try using width instead */ 
    width: 350px; 
    height:75px; 

それでは、どのようwoul dクラスredbgのdivに赤いツールチップが表示され、クラスbluebgのdivは青いツールチップをどのように表示しますか？私は、これはあなたが探しているものを達成することができると思う

おかげ

Answer 1

.redbg + .tooltip > .tooltip-inner { 
    background-color: red; 
    color: #fff; 
} 

.bluebg + .tooltip > .tooltip-inner { 
    background-color: blue; 
    color: #fff; 
} 

。