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 element that triggers the tooltip.

This is what i tried:

$(function(){   $("[id$=amount]").tooltip({     trigger: 'manual',     placement: 'right'   }).addClass("test"); // <--- This does not help me. Class just ends up  });                    //      in the trigger element. Se html output                         //      from firebug below... 

But then the class just ends up in the element that triggers the tooltips:

<input       id="list_wishes_attributes_0_amount"       class="test"  <!-- The class I tried to add to the tooltip ended up here. -->      type="text"       tabindex="3"       size="30"       rel="tooltop"       name="list[wishes_attributes][0][amount]"       min="0"       data-original-title="Only numbers please" /> 

How can i assign a custom class for my tooltip, and not the input field that triggers it?

Answer 1

(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>