Bootstrap ToolTip

by Sayham Chowdhury

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toolTipField">
  <h2>Virtual Species</h2>
  This is a <a href="http://www.virtualspecies.com/" data-toggle="toolTip" data-placement="bottom" title="Hold 'control/command' and click to open the blog (virtualspecies.com)"><strong>Cool Blog</strong></a>...<br/>
  Hover over 'Cool Blog' text for further info...
</div>

CSS

h2{
  color: teal;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid cyan;
  padding-bottom: 10px;
}
.toolTipField{
  border: 1px solid cyan;
  padding: 5px;
}

JavaScript

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