5.2.0 regression: tooltips never close when they are initialized using as `selector` option the attribute `title`

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

Hi,

Since Bootstrap v5.2.0, the tooltips never close when they are initialized with selector option. It worked fine under Bootstrap v5.1.3. So, I think there is a regression.

HTML:

<div id="btn-box" class="btn-group m-5">
  <button class="btn btn-lg btn-primary" title="Label 1">Button 1</button>
  <button class="btn btn-lg btn-secondary" title="Label 2">Button 2</button>
</div>

JavaScript:

new bootstrap.Tooltip('#btn-box', {
    selector: '[title]'
});

Reduced test cases

The tooltip is hidden when the mouse leaves the element	Version	selector option	CodePen link
✔️	5.1.3	❌	https://codepen.io/BrokenSourceCode/pen/zYWzZNJ
✔️	5.1.3	✔️	https://codepen.io/BrokenSourceCode/pen/vYRZxNo
✔️	5.2.0	❌	https://codepen.io/BrokenSourceCode/pen/GRxEWWp
❌	5.2.0	✔️	https://codepen.io/BrokenSourceCode/pen/ExEXWPp

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

Windows

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

Chrome

What version of Bootstrap are you using?

v5.2.0

[Bugophobia]

Not fixed in 5.2.1

@GeoSot said it won’t be fixed, because this is a bad practice. See https://github.com/twbs/bootstrap/issues/36813#issuecomment-1195141449. You can use another selector like [data-bs-toggle="tooltip"] or as well use your own custom class. The solution below will show you how to fix your issue.

HTML:

<!-- For `[data-bs-toggle="tooltip"]` selector. -->
<button class="btn btn-lg btn-info" title="Label 1" data-bs-toggle="tooltip">Button 1</button>
<button class="btn btn-lg btn-success" title="Label 2" data-bs-toggle="tooltip">Button 2</button>

<!-- For `.toggle-tooltip` selector. -->
<button class="btn btn-lg btn-warning toggle-tooltip" title="Label 3">Button 3</button>
<button class="btn btn-lg btn-danger toggle-tooltip" title="Label 4">Button 4</button>

JavaScript:

new bootstrap.Tooltip('body', {
    selector: '[data-bs-toggle="tooltip"], .toggle-tooltip'
});

---

Furthermore, @GeoSot, I suggest adding a note in the documentation of the selector option to state that the title attribute MUST NOT be used as selector.

[saturdaywalkers]

Thanks @BrokenSourceCode !

Turned out quite easy to fix… just grep the js html templates for title= and add a target to use in a selector, data-bs-tooltip in my case.