Following the documentation, I need to display some HTML inside a bootstrap 5 tooltip.

However, copy pasta from the doc does not give the expected output.

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

Here is a jsfiddle.

Instead of displaying parsed HTML, HTML is parse as text.

How can I display content as HTML instead of text ?

Following the documentation, I need to display some HTML inside a bootstrap 5 tooltip.

However, copy pasta from the doc does not give the expected output.

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

Here is a jsfiddle.

Instead of displaying parsed HTML, HTML is parse as text.

How can I display content as HTML instead of text ?

• javascript
• html
• bootstrap-5

• 1 You are using Bootstrap5, yet you are working off of the documentation for version 4. The attribute enabling HTML content needs to be data-bs-html="true" – C3roe Commented Sep 3, 2021 at 9:10

1 Answer 1

In Bootstrap v5.0 you should use data-bs-html="true".

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

Your JSFiddle.