Tooltip/popover: data-bs-title and data-bs-content are reformatted or throw ("9.90" shows as "9.9", empty title throws)

Open
  • Is something wrong?
#43,090 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
Half a day
Newbie friendliness
55/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript
Domain
frontend

Research direction

The data-API reads data-bs-title and data-bs-content through Manipulator.normalizeData, and the reporter places the fix in Tooltip._getConfig. Start by reproducing the cases in the reduced test case (9.90, empty title, after) with the standard init loop, then check the tooltip tests. Done means text attributes render exactly as written and a bad element no longer stops later tooltips from initializing. Settle the data-bs-content="null" behaviour change with maintainers before opening a pull request.

Written by the indexing model from the issue text.

Description

backport-to-v5 bug confirmed js v5 v6
Prerequisites
Describe the issue

Tooltip and popover pass data-bs-title / data-bs-content through the data-API type conversion (Manipulator.normalizeData: numbers, "null", JSON.parse). For free text that changes or rejects what the author wrote. On the shipped 5.3.8 bundle and on main:

data-bs-title="9.90"   -> shows "9.9"
data-bs-title="2.0"    -> shows "2"
data-bs-title="1e3"    -> shows "1000"
data-bs-title='"quoted"' -> shows quoted (quotes removed)
data-bs-title=""       -> throws: Option "title" provided type "null" but expected type "(string|element|function)"
data-bs-title="null"   -> throws (same)
data-bs-title="[1,2]"  -> throws: provided type "array"

With the documented init loop ([...tooltipTriggerList].map(el => new bootstrap.Tooltip(el))), one throwing element also stops the tooltips after it from being initialized. An empty title from a template with a missing value is enough.

This looks like the remaining root cause of #41925 (booleans, fixed on main by #42548) and #22057 (numbers): title and content are text, so they could be read as written instead of normalized. I have a patch for main that does that in Tooltip._getConfig (with tests; the unit suite passes). One behaviour change to note: data-bs-content="null" would then show the text "null" instead of no content. Happy to open a PR against main and/or v5-dev if you want it.

Reproduction: <button data-bs-toggle="tooltip" data-bs-title="9.90">x</button> plus the standard init loop, then hover.

Disclosure: this was found, reproduced and patched by an AI agent (Claude Code), which ran the reproduction and tests quoted above. It has not been separately reviewed by a human.

Reduced test cases
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-title="9.90">price</button>
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-title="">empty</button>
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-title="after">after</button>
<script>
[...document.querySelectorAll('[data-bs-toggle="tooltip"]')].map(el => new bootstrap.Tooltip(el))
</script>

Hover "price": shows 9.9. The second button throws, and "after" never gets a tooltip.

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

Linux

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

Chrome

What version of Bootstrap are you using?

5.3.8 and main (v6.0.0-alpha.1)

Resolution by version

The v6 fix merged in #43113 for v6.0.0-alpha.2. Decimal strings and empty titles now keep their original text. This issue remains open for the v5 backport.

Dominant language
MDX
Stars
175k
Forks
78.7k
Avg merge
1d 7h
Merged PRs (30d)
103

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from twbs/bootstrap

All issues in twbs/bootstrap

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.