Adding custom class to tooltip

(Updated March 23rd 2021 to include Boostap 5)

Prior to Bootstrap 4:

$().tooltip({
  template: '<div class="tooltip CUSTOM-CLASS"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
})

---

Bootstrap 4:

$().tooltip({
  template: '<div class="tooltip CUSTOM-CLASS" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
})

---

Bootstrap 5: They've added the ability to add the custom class within the source so its much easier to do.

$().tooltip({
  customClass: 'CUSTOM-CLASS'
})

Pure Javascript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {customClass: 'CUSTOM-CLASS'})

or in the html:

<a href="http://stackoverflow.com" data-bs-custom-class="CUSTOM-CLASS" title="Some Helpful Info!" role="tooltip">Stackoverflow.com</a>

The method I use is to attach a class directly to the element via JQuery (works in Bootstrap 3). It's a little trickier, because you need to find the hidden, auto-generated element via the parent's data attribute.

$('#[id$=amount]')
  .tooltip()
    .data('bs.tooltip')
      .tip()
      .addClass('custom-tooltip-class');

I prefer this to overriding the template, because it's much more concise and less verbose than all that extra HTML.