Colored Bootstrap Tooltip

by aflynt

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>
    <a href="http://google.com" data-toggle="tooltip" data-placement="bottom"
        data-original-title="Tooltip on bottom"
       class="red-tooltip">Tooltip on bottom</a>

CSS

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

JavaScript

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