<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class=""> <h2>Bootstrap tooltip</h2> <div class="tooltip-example"> <a href="#" class="tooltip-link">Bootstrap Tooltip</a> <div class="tooltip-text"> Tooltip exapmle </div> </div> </div> </div>

.tooltip-example{ position: relative; margin-top:40px; } .tooltip-text{ position:absolute; padding:10px; background-color:rgb(0, 0, 0); border-radius: 5px; top:30px; display:flex; justify-content:center; align-items:center; color: #f1f1f1; z-index: 1; visibility: hidden; opacity: 0; } .tooltip-text::after{ content:""; position: absolute; width:10px; height: 10px; top:2px; background-color:rgb(0, 0, 0); transform: rotate(45deg) translate(-50%,-50%); z-index: 2; } .tooltip-example:hover .tooltip-text{ visibility: visible; opacity: 1; }