Bootstrap tooltip $(...).tooltip is not a function

Question

I am getting the mentioned error with the following code. The documentation says that you only need jQuery and Bootstrap and then tooltip is there. popper is also not needed if using the bootstrap min version.

Why does it not work? I searched for hours and no none seems to have the same problem. Thanks for help in advance.

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" data-toggle="tooltip" title="hi there!">
</div>

Answer 1

The following works for me in Bootstrap 5 - the same may be applicable in bootstrap 3/4, but double check the docs for your version.

1. Require jQuery first.

I've seen some other threads saying you need to require jquery-ui too - personally i've not had to do this, I can't speak for earlier bootstrap versions.

jQuery has been removed from Bootstrap 5, but it knows to use it if you have it in your project. To do this you must assign jQuery to window.jQuery - if you try to only assign it to the $ shorthand Bootstrap won't find jQuery (this was the issue for me - see example below of how I use both)

2. Next require @popperjs/core before bootstrap

Make sure you're using the correct Popper package for your bootstrap version - 4 requires popper.js, which is not the same as @popperjs/core

3. Lastly, require bootstrap

4. If you want tootlips to work on dynamically loaded content (e.g. content that is loaded after you make some future AJAX request), you'll want to make sure you define the selector for tooltips to look for.

window.jQuery = window.$ = require('jquery');

window.Popper = require('@popperjs/core');

require('bootstrap');

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

N.B. I'm using packages installed with NPM (i.e. not via CDN), requiring them in my app.js from node_modules. But the same should mostly be applicable - especially the order your require dependencies.

• Bootsrtap 5.1.3
• jQuery 3.6.0
• @popperjs/core 2.11.5

Answer 2

Tooltips require popper.js to work. Make sure you include that before bootstrap.min.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input type="text" data-toggle="tooltip" title="hi there!">
</div>

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});