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.

[Jyoticharan]

Can I work over this issues

[julien-deramond]

Hey @Jyoticharan
As mentioned in our Contributing Guidelines, we don't assign issues. You are welcome to suggest something in this issue on how to best solve it if needed. Then you'll be able to create directly a PR if needed.

[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;
}

[Jyoticharan]

can you assign me the task of adding css class for tooltip html mode

[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