<figure> doesn't get rendered inside a tooltip

[tekoyaki]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

<img> works fine inside a tooltip, but when enclosed in <figure>, it no longer renders.

Reduced test cases

https://codepen.io/radiuskuntoro/pen/KwdzzaM

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.7

[CyrilKrylatov]

Indeed it's not rendering inside tooltip's element:

(to inspect tooltip's element, we can inspect the button then use

$0.dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));

in the console to make it appear and inspect it)

My guess would be is that's because <figure> is not in the DefaultAllowList here: https://github.com/twbs/bootstrap/blob/main/js/src/util/sanitizer.js#L11-L46 but I'm not quite sure, maybe I'm totally mistaken here.

[Garima-Saxena-2260]

Hi! I’ve tested this using a custom tooltip setup.

✅ <img> tag inside tooltip renders correctly.
❌ When wrapped with <figure> and <figcaption>, it does not render at all.

I believe this is due to <figure> not being in the DefaultAllowList inside sanitizer.js. Adding figure and figcaption to that list may fix this issue.

Would love to work on a PR for this if needed. 😊