Add CSS class for tooltip HTML mode

[HybridSolutions]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

It would be interesting to have BS add a CSS class like bs-tooltip-html to the tooltip whenever the html attribute is set to true.

Motivation and context

By default, tooltips have a max-width, but in some cases, when using HTML inside tooltips, it's required to extend the max-width. Yes it's possible to add a custom class but a standard class would be nice.

[niktariy]

Hello @HybridSolutions !
By default tooltip element has a tooltip class, I don't think that more default classes are required.
You can change max-width value by passing your own class to the tooltip component (you can also use this class for several tooltips if needed) and then define CSS custom property --#{$prefix}tooltip-max-width: #{$tooltip-max-width};

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-html="true"
        data-bs-custom-class="html-tooltip"
        data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

.html-tooltip {
  --bs-tooltip-max-width: 400px;
}

[HybridSolutions]

Hello @HybridSolutions ! By default tooltip element has a tooltip class, I don't think that more default classes are required. You can change max-width value by passing your own class to the tooltip component (you can also use this class for several tooltips if needed) and then define CSS custom property --#{$prefix}tooltip-max-width: #{$tooltip-max-width};

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-html="true"
        data-bs-custom-class="html-tooltip"
        data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

.html-tooltip {
  --bs-tooltip-max-width: 400px;
}

I'm aware of the alternative. I only made the suggestion because the class bs-tooltip-auto is being placed when attribute data-bs-placement="auto" is used, so, to be coherent, it would make sense to also add a bs-tooltip-html when using data-bs-html="true".

Cheers ;)

[msathyaanand]

Find the css code

.bs-tooltip-html { max-width: none; }
Please check the js code for the same

$(function () {
  $('[data-toggle="tooltip"][data-html="true"]').tooltip({
    template: '<div class="tooltip bs-tooltip-html" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
  });
});

This code adds a new CSS class called bs-tooltip-html that removes the max-width limit from tooltips. It also adds a new option to the tooltip initialization that checks for the data-html attribute and sets the template option accordingly, adding the bs-tooltip-html class to the tooltip element. With this code, you can now use the data-html="true" attribute on your tooltips to enable HTML content and extend the max-width if needed.

[HybridSolutions]

Find the css code

.bs-tooltip-html { max-width: none; } Please check the js code for the same

$(function () {
  $('[data-toggle="tooltip"][data-html="true"]').tooltip({
    template: '<div class="tooltip bs-tooltip-html" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
  });
});

This code adds a new CSS class called bs-tooltip-html that removes the max-width limit from tooltips. It also adds a new option to the tooltip initialization that checks for the data-html attribute and sets the template option accordingly, adding the bs-tooltip-html class to the tooltip element. With this code, you can now use the data-html="true" attribute on your tooltips to enable HTML content and extend the max-width if needed.

Thanks for the effort. I know all these workarounds but the issue I was pointing was not how to find a way of changing the CSS of an html tooltip, but a design issue. BS is assigning other classes according to attributes so it would make sense to also have the class i mentioned assigned as well. Both the custom class or this workaround works but the core design is not correct. Html tooltips should not have max-width set to a fixed value by default. It should have the “fit-content” value. I understand if you don't agree with my approach. I just decided to give my opinion on this matter ;)

[julien-deramond]

I don't mind adding a .bs-tooltip-html when data-bs-html="true" for consistency. @GeoSot what do you think?

[HybridSolutions]

“fit-content”

It's not just that. Max-width should be set to “fit-content” when data-bs-html attribute is set to true.

[GeoSot]

I don't mind adding a .bs-tooltip-html when data-bs-html="true" for consistency. @GeoSot what do you think?

Seems a simple & fair add-on, but can easily be covered by the solution @niktariy suggested too, above