Tooltips & Dropdowns

For information about tooltips and dropdowns please refer to Bootstrap's documentation.

Customize

Using custom CSS classes you can customize your tooltips:

 $('#tooltip-1').tooltip({
    template:
      `<div class="tooltip" role="tooltip">
        <div class="arrow brc-success"></div>
        <div class="bgc-success tooltip-inner text-dark-tp3 font-bolder text-110 px-2 pb-2"></div>
      </div>`
 });

$('#popover-1').popover({
    container: 'body',
    template: 
      `<div class="popover brc-success-m3" role="tooltip">
         <div class="arrow brc-success"></div>
         <h3 class="popover-header border-0 bgc-success-m2 text-dark-tp4 text-600"></h3>
         <div class="popover-body text-grey-d2"></div>
       </div>`
});

For popovers you can have a .arrow2.arrow that comes before .arrow .
.arrow2 should have a color similar to .popover-header's background and .arrow should have a color similar to .popover's border color:
Popover

$('#popover-2').popover({
    container: 'body',
    template: 
      `<div class="popover brc-primary-m2 border-b-2" role="tooltip">
        <div class="arrow arrow2 brc-primary-l2"></div>
        <div class="arrow brc-primary"></div>
        <h3 class="popover-header bgc-primary-l2 border-0 text-110 text-dark-tp4 text-600"></h3>
        <div class="popover-body text-grey-d2"></div>
      </div>`
});