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>

there's nothing wrong with the code you've posted - see https://codepen.io/jenko3000/pen/GRJgpmJ — Will Jenkins, Feb 07 '20 at 15:46
The code works - as you can see from the snippet I edited in to the question. The only issue I can see is that the placement of the tooltip is in the top left, which may be being cut off depending on your HTML structure. I'd suggest moving the tooltip placement to something more appropriate — Rory McCrossan, Feb 07 '20 at 15:52
Does this answer your question? [.tooltip() is not a function](https://stackoverflow.com/questions/9394390/tooltip-is-not-a-function) — Zeeshan Eqbal, Feb 07 '20 at 22:38

score 1 · Answer 1 · answered May 15 '22 at 09:49

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.

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)

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

Lastly, require bootstrap
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

score -1 · Answer 2 · answered Feb 07 '20 at 19:14

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();
});

In Bootstrap3 not required `popper.js` library for `tooltip` or `popover` or `dropdown`. — Raeesh Alam, Feb 08 '20 at 03:54

score -3 · Answer 3 · answered Feb 08 '20 at 04:01

You need to add bootstrap.min.css file and you can also set position of tooltip by data-placement attribute & set value to top, bottom, left or right.
Bootstrap3 tooltip doc: https://getbootstrap.com/docs/3.3/javascript/#tooltips

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

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>

<br><br>

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6">
      <input type="text" class="form-control" data-toggle="tooltip" title="hi there!">
    </div>
  </div>
</div>

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

3 Answers3

Linked