<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();
});
