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

[Rezyan]

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

[aavmurphy]

Same error for me.
https://getbootstrap.com/docs/5.2/components/tooltips/#options
Please could the documentation be updated for this feature - it's kind of hidden away, and the offsite links use jQuery and are older bootstrap versions. It's more than worthy enough to get its own example!

[julien-deramond]

Apparently, it comes from 328f723.

I'll try an explanation and @GeoSot will confirm or not.

When the tooltip appears, title is removed from the DOM so the selector can't work anymore if the attribute is removed.

In your case, I'd say you can use data-bs-title instead of title.

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

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

[Rezyan]

Apparently, it comes from 328f723.

I'll try an explanation and @GeoSot will confirm or not.

When the tooltip appears, title is removed from the DOM so the selector can't work anymore if the attribute is removed.

In your case, I'd say you can use data-bs-title instead of title.

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

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

Well, I understand where the issue comes from with your explanation, and I also understand how I could use your workaround in my code, thanks. Will the code remains as it is now? Will there be no correction to fix this regression?

[GeoSot]

Apparently, it comes from 328f723.

You are right on this. It was something we had discussed together too, as the title was just left empty.

@brokensourcecode I would prefer to not 'fix' this as it wasn't documented and of course is a bad practice to leave a blank attribute there. So you could, may use any other attr

[Rezyan]

Apparently, it comes from 328f723.

You are right on this. It was something we had discussed together too, as the title was just left empty.

@brokensourcecode I would prefer to not 'fix' this as it wasn't documented and of course is a bad practice to leave a blank attribute there. So you could, may use any other attr

No problem, I'll use another selector if you want to keep the code as it is.

Perhaps it should be mentioned inside the selector option documentation that the title attribute cannot be used as a selector, right? Since this has changed since Bootstrap 5.2. This could be useful in the future for developers who encounter the same issue as me.

Maybe like this:

If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this issue and an informative example.
+ Note that this option cannot work with the <code>title</code> attribute (such as <code>[title]</code>), because the attribute is removed from the DOM by Bootstrap.

[aavmurphy]

@GeoScot It is documented in https://getbootstrap.com/docs/5.2/components/tooltips/#options and really does need to be fixed as its a regression from several previous releases. Dynamically generated content is pretty common now, and title="something" is a useful fallback is something goes wrong

[Rezyan]

@GeoScot It is documented in https://getbootstrap.com/docs/5.2/components/tooltips/#options and really does need to be fixed as its a regression from several previous releases. Dynamically generated content is pretty common now, and title="something" is a useful fallback is something goes wrong

@aavmurphy Could you please copy and paste the part of the documentation? I really don't understand of which text you are talking about.

But I agree with you that this is a good fallback solution, and also that this is a regression from the previous releases that accepted this behavior.

[aavmurphy]

@brokensourcecode Its in https://getbootstrap.com/docs/5.2/components/tooltips,
scroll down to 'Options',
then the selector row in the table, which says
"If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this issue and an informative example."
The example uses jQuery, and a legacy version of bootstrap, so the documentation could be updated as this functionality makes tooltips much easier to use

[aavmurphy]

See #36743

[github-actions]

As the issue was labeled with awaiting-reply, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.

[saturdaywalkers]

Not fixed in 5.2.1

[Rezyan]

Not fixed in 5.2.1

@GeoSot said it won't be fixed, because this is a bad practice. See #36813 (comment). 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.