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>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)