If you want to customize the appearance of the tooltip without using a stylesheet, you have the option to directly add styles to the tooltip itself by adjusting its template.
While this may not be recommended in most situations because it involves applying styles directly to the element, there are rare cases where it may be necessary or even the preferred choice.
$(selector).tooltip({
title: "Lorem ipsum ...",
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>',
});
Alternatively, you can define the template as an attribute:
<span
data-toggle="tooltip"
title="Lorem ipsum ..."
data-template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>'
>Some abbreviation</span>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
The template option is defined as:
Initial HTML structure for the tooltip.
The tooltip's content will be placed inside the .tooltip-inner element.
The arrow of the tooltip will be contained within the .tooltip-arrow.
The main container should have the .tooltip class.
By default, the template looks like this:
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
If you prefer, you can create a custom class within the template and style that instead:
$(selector).tooltip({
title: "Lorem ipsum ...",
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner my-custom-tooltip"></div></div>',
});
.my-custom-tooltip {
max-width: none;
}