Colored Bootstrap Tooltip

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;">
       <input type="text" data-toggle="tooltip" 
        data-original-title="Tooltip on left"
       class=""  /><br/>
       
       <a href="#" data-toggle="tooltip" data-placement="right"
       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-tool + .tooltip > .tooltip-inner { background-color: #f00; }

JavaScript

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
     $('[data-toggle="tooltip"]').addClass('red-tool');
});