Bootstrap - 如何定位特定的工具提示？

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; 

所以竟被如何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; 
} 

我認爲這是可以實現你在找什麼。