BS5 tooltips got mixed in with BS4 tooltips and now are bugged

[wmccrite]

I have a web app that we recently upgraded from bootstrap 4 to bootstrap 5.3.8. For the past month or so, I've been going through and fixing broken layouts/colors/etc. due to this upgrade. I thought it would be cool to add BS5 tooltips on some buttons, so I made a branch and merged it with dev for new BS5 tooltips.

However, I did not realize the scope of which I was initializing the BS5 tooltips. The new ones seemed to have taken over our old, existing BS4 tooltips that were still using jquery. The main issue I ran into was that tooltips for fields with validation no longer updated and persisted even after the field passed validation i.e. it still said "[fieldName] is required" with a new BS5 tooltip even after I fill in the field name, whereas the old BS4 jquery tooltips did not do that before.

So we reverted dev back to a previous commit before I introduced BS5 tooltips, but the same issue persists. There's no code that initializes BS5 tooltips in this reverted version. I tried removing node_modules and then doing npm install, but that did not fix it. We are also using angular and I read somewhere that I may need to clear angular's cache.

I'm just wondering if anyone else has ran into this issue and/or has any possible solutions? I also understand that replacing our jquery with the new way to initialize/dispose/update tooltips would maybe work, but I'm wondering if there's a simpler solution than that.

[yassine-krichen]

What you’re seeing isn’t mystical Bootstrap corruption. It’s the boring reality of mixing two tooltip systems that absolutely hate coexisting: BS4 (jQuery-driven) and BS5 (vanilla JS). Once BS5 is introduced, even briefly, it can leave behind build artifacts, cached bundles, and duplicated CSS/JS that keep overriding your BS4 behavior long after you yank the code out.

Here’s the human-ish breakdown:

1. You probably still have BS5 tooltip JS somewhere in your compiled output.
Even after reverting, Angular’s build cache or node_modules leftovers can keep stale chunks lying around. BS5’s tooltip script runs, sees anything that looks like a tooltip target, and happily hijacks it.

This is why your validation tooltips no longer update. jQuery tries to modify the tooltip… BS5 already attached its own instance and just won’t let go.

Feels great, right?

2. Bootstrap 4 and Bootstrap 5 tooltips cannot run at the same time unless you enjoy pain.
They register different event handlers, initialize differently, store instances differently, and use different attributes. Whichever loads last usually “wins.”

Your app got stuck in a weird hybrid state.

3. Reverting the commit does not revert the compiled output.
Angular caches aggressively. The browser caches aggressively. Tooling caches aggressively. Your dev environment clings to old bundles like a raccoon guarding a trash can.

4. The fix is stupidly simple but annoying:
You need to force the environment to purge everything. Not code. Everything around the code.

Do this in order:

• Delete node_modules
• Delete package-lock.json (or your lockfile)
• Delete Angular cache:

ng cache clean

• Delete your build/dist folder
• Restart your dev server
• Hard-refresh your browser (or clear browser cache completely)

If you're doing SSR or have a CDN layer, purge those too. Cached bundles can be surprisingly persistent.

5. Make sure no Bootstrap 5 scripts/CSS are lingering in your Angular build config.
Check:
angular.json
index.html
your global styles
any CDN includes
any imported JS in your components
Webpack config overrides
lazy modules

Even one stray BS5 file is enough to bring the chaos back.

6. BS4 tooltips won’t behave correctly again until BS5 is totally gone.
Until then, jQuery will try to update a tooltip that BS5 already replaced, so the “stuck validation message” symptom keeps happening.