How to use tooltip with jquery in bootstrap 5.

[skwebs]

I want to use tooltip() with jquery in bootstrap 5.0.0-alpha2 but tooltip isn't work properly. My code snap is $('[data-toggle="tooltip"]').tooltip({ container: 'body', boundary: 'window', placement: "top" });

Is this possible to use tooltip with jquery in bootstrap 5. If yes then how?

[XhmikosR]

Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and Operating System details.

This is an automated reply

[skwebs]

Bootstrap 5.0.0-alpha2 tooltip work properly with jquery but doesn't work when add jquery-ui.

Bootstrap 5 with jquery and jquery-ui (working tooltip)
https://codepen.io/sk05/pen/abZZKVJ

Bootstrap 5 with only jquery (doesn't work properly)
https://codepen.io/sk05/pen/JjKKZpJ

[ricksu978]

By swapping the order of the JavaScript files (jQuery + jQuery UI + Bootstrap 5.0.0-alpha2)
It seems to work

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js

https://codepen.io/Neverever978/pen/JjKMzLZ

[skwebs]

Thank you.

[XhmikosR]

Hmm, it's jQuery UI. It seems there's a conflict with jQuery UI's tooltip https://codepen.io/XhmikosR/pen/gOMMjYy?editors=1010

[Johann-S]

we provide a noConflict method to help for that cases

[XhmikosR]

You could work around this by using vanilla JS for this, but it's a conflict nevertheless, which at this point I'm not sure how we can fix.