Adding custom class to tooltip

Question

I want to style(css) some bootstrap-tooltip.js tooltips, without affecting all the tooltips. I have tried many different solutions but i allways end up adding a class to the ele

Answer 1

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>'
})

Answer 2

Try setting the html option to true and inserting something like <span class="test">YOUR TEXT</span> into the title option.

$(function(){
  $("[id$=amount]").tooltip({
    trigger: 'manual',
    placement: 'right',
    html: true,
    title: '<span class="test">YOUR TEXT</span>'
  });
}); 

I honestly am not sure if this will work, but I believe it's worth a shot.

EDIT: After reading this post it may be more helpful.