Colored Bootstrap Tooltip

by Anurag Mishra

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <br/><br/>
    <p style="margin:10px 100px;">
       <a href="#" data-toggle="tooltip" data-placement="left"
       title="" data-original-title="Tooltip on left"
       class="red-tooltip">Tooltip on left</a><br/>
       
       <a href="#" data-toggle="tooltip" data-placement="right"
       title="" data-original-title="Tooltip on right"
       class="red-tooltip">Tooltip on right</a><br/>
       
       <a href="#" data-toggle="tooltip" data-placement="top"
       title="" data-original-title="Tooltip on top"
       class="red-tooltip">Tooltip on top</a><br/>
       
       <a href="#" data-toggle="tooltip" data-placement="bottom"
       title="" data-original-title="Tooltip on bottom"
       class="red-tooltip">Tooltip on bottom</a><br/>
    </p>

CSS

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }

JavaScript

$(document).ready(function(){
    $("a").tooltip();
});