Incorporating Bootstrap 4.3.1
Integration in HTML Document
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
Implementation in CSS File
.tooltip-inner {
background-color: red;
color: #444;
width: auto;
max-width: 150px;
font-size: 100%;
white-space: nowrap;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
border-top-color: red;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
border-right-color: red;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
border-bottom-color: red;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
border-left-color: red;
}
Addition to Javascript File
$(document).ready(function () {
$('.btn').tooltip();
});