<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <p title="CSS Tootlip" class="tooltip1">Hover me</p> </div> </div>

.container{padding: 5em;} .tooltip1{ display: inline; position: relative; font-size: 1.5em; } .tooltip1:hover:after { background: rgba(0,0,0,.8); border-radius: 5px; bottom: 110%; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; white-space: nowrap; position: absolute; } .tooltip1:hover:before { border: solid; border-color: rgba(0,0,0,.8) transparent; border-width: 6px 6px 0 6px; top: -10%; content: ""; left: 50%; position: absolute; }