JSFiddle - React, Tailwind, and code Playground

by Tony Realovich

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="relative">
    <div class="absolute">
        <button type="button" class="btn btn-success btn-tooltip" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>        
    </div>
</div>

CSS

.relative {
position: relative;
height: 100px;
background: #ccc;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
width: 80%;
margin: 10px auto;
}

.absolute {
position: absolute;
width: 200px;
height: 50px;
bottom: 0;
left: 50%;
margin-left: -100px;
background-color: #fff;
text-align: center;
}

JavaScript

$(document).ready(function(){
  $('.btn-tooltip').tooltip();
});