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>
ผลลัพธ์