"Bootstrap Tooltips"
Bootstrap 4.1.1 Snippet by CreativeTim

<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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"> <body> <div class="container mt-5"> <div class="title"> <h3>Tooltips</h3> </div> <div class="row mt-5"> <div class="col-sm-6 offset-sm-2"> <button type="button" class="btn" data-toggle="tooltip" data-placement="left" title="" data-container="body" data-original-title="Tooltip on left">On left<div class="ripple-container"></div></button> <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="" data-container="body" data-original-title="Tooltip on top">On top</button> <button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="" data-container="body" data-original-title="Tooltip on bottom">On bottom</button> <button type="button" class="btn" data-toggle="tooltip" data-placement="right" title="" data-container="body" data-original-title="Tooltip on right">On right</button> </div> </div> </div> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p> </footer> <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> </body>
html *{ -webkit-font-smoothing: antialiased; } .title h3{ font-size: 25px !important; margin-top: 20px; margin-bottom: 25px; line-height: 1.4em !important; font-weight: 300; } .container .btn{ color: #fff; background-color: #999; border-color: #999; box-shadow: 0 2px 2px 0 rgba(153,153,153,.14), 0 3px 1px -2px rgba(153,153,153,.2), 0 1px 5px 0 rgba(153,153,153,.12); position: relative; padding: 12px 30px; margin: .3125rem 1px; font-size: .75rem; font-weight: 400; line-height: 1.428571; text-decoration: none; text-transform: uppercase; letter-spacing: 0; border: 0; border-radius: .2rem; outline: 0; transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1); will-change: box-shadow,transform; } .container .btn:active, .container .btn:focus, .container .btn:hover, .container .btn:hover:active{ box-shadow: 0 14px 26px -12px rgba(153,153,153,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(153,153,153,.2); background-color:#999; color: #fff; } body .tooltip-arrow { display: none; } body .tooltip.show { opacity: 1; -webkit-transform: translate3d(0, 0px, 0); -moz-transform: translate3d(0, 0px, 0); -o-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } body .tooltip { opacity: 0; transition: opacity, transform .2s ease; -webkit-transform: translate3d(0, 5px, 0); -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); font-size: 0.75rem; } body .tooltip.bs-tooltip-top .arrow::before, body .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before, body .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #fff; } body .tooltip.bs-tooltip-right .arrow::before, body .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before, body .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #fff; } body .tooltip.bs-tooltip-left .arrow::before, body .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before, body .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #fff; } body .tooltip.bs-tooltip-bottom .arrow::before, body .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before, body .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #fff; } body .tooltip-inner { padding: 10px 15px; min-width: 130px; } body .popover, body .tooltip-inner { line-height: 1.5em; background: #fff; border: none; border-radius: 3px; box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); color: #555; } body .popover { padding: 0; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } .popover.left>.arrow, .popover.right>.arrow, .popover.top>.arrow, .popover.bottom>.arrow { border: none; } .popover.bs-popover-top .arrow::before, .popover.bs-popover-auto[x-placement^="top"] .arrow::before, .popover.bs-popover-auto[x-placement^="top"] .arrow::before, .popover.bs-popover-bottom .arrow::before, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::before, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::before, .popover.bs-popover-right .arrow::before, .popover.bs-popover-auto[x-placement^="right"] .arrow::before, .popover.bs-popover-auto[x-placement^="right"] .arrow::before, .popover.bs-popover-left .arrow::before, .popover.bs-popover-auto[x-placement^="left"] .arrow::before, .popover.bs-popover-auto[x-placement^="left"] .arrow::before { border: 0; } body .popover-header { background-color: #fff; border: none; padding: 15px 15px 5px; font-size: 1.125rem; margin: 0; color: #555; } body .popover-body { padding: 10px 15px 15px; line-height: 1.4; color: #555; } /* footer */ footer{ margin-top: 100px; color: #555; background: #fff; padding: 25px; font-weight: 300; } .footer p{ margin-bottom: 0; font-size: 14px; font-weight: 300; } footer p a{ color: #555; font-weight: 400; } footer p a:hover { color: #9f26aa; text-decoration: none; }
$(document).ready(function() { $('body').bootstrapMaterialDesign(); // Activate the Tooltips $('[data-toggle="tooltip"], [rel="tooltip"]').tooltip(); });

Related: See More


Questions / Comments: