Bootstrap 3 Custom Colored Tooltips

by technotarek

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
	    <h1>Colored Tooltip</h1>
    </div>
	<div class="col-sm-3">
      <h3>Top</h3>
    	<a href="#" data-toggle="tooltip" title="This tooltip is on top!">Hover to see my tooltip</a>
    </div>
	<div class="col-sm-3">
      <h3>Right</h3>
    	<a href="#" data-placement="right" data-toggle="tooltip" title="This tooltip is on the right!">Hover to see my tooltip</a>
    </div>
	<div class="col-sm-3">
      <h3>Bottom</h3>
    	<a href="#" data-placement="bottom" data-toggle="tooltip" title="This tooltip is on the bottom!">Hover to see my tooltip</a>
    </div>
	<div class="col-sm-3">
      <h3>Left</h3>
    	<a href="#" data-placement="left" data-toggle="tooltip" title="This tooltip is on the left!">Hover to see my tooltip</a>
    </div>
  </div>
</div>

CSS

.tooltip.top .tooltip-inner {
    background-color:red;
  }
.tooltip.top .tooltip-arrow {
          border-top-color: red;
       }
.tooltip.right .tooltip-inner {
    background-color:blue;
  }
.tooltip.right .tooltip-arrow {
          border-right-color: blue;
       }
.tooltip.bottom .tooltip-inner {
    background-color:green;
  }
.tooltip.bottom .tooltip-arrow {
          border-bottom-color: green;
       }  
.tooltip.left .tooltip-inner {
    background-color:yellow;
  }
.tooltip.left .tooltip-arrow {
          border-left-color: yellow;
       }

JavaScript

$("[data-toggle=tooltip]").tooltip();