Tooltip
<link href="https://getbootstrap.com/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Custom-Classes-Bootstrap-Tooltips/bootstrap-tooltip-custom-class.css">
<style>
.tooltip-custom .tooltip-inner {
background-color: #f2653c;
}
.tooltip-custom.bs-tooltip-top .arrow:before {
border-top-color: #f2653c;
}
.tooltip-custom.bs-tooltip-right .arrow:before {
border-right-color: #f2653c;
}
.tooltip-custom.bs-tooltip-left .arrow:before {
border-left-color: #f2653c;
}
.tooltip-custom.bs-tooltip-bottom .arrow:before {
border-bottom-color: #f2653c;
}
</style>
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-primary" title="Tooltip primary example">Tooltip primary</button>
<button class="btn btn-custom" data-toggle="tooltip" data-placement="bottom" title="Custom tooltip example">Custom tooltip</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Custom-Classes-Bootstrap-Tooltips/bootstrap-tooltip-custom-class.js"></script>
<script>
$(document).ready(function(){
$('.btn-secondary').tooltip();
});
$('.btn-custom').tooltip({
customClass: 'tooltip-custom'
});
</script>
ผลลัพธ์