TypeError: $(…).tooltip is not a function

Question

I am getting

TypeError: $(…).tooltip is not a function

error in the jquery file in which i am initialising tooltip() function while using lightbox2 with bootstrap.

$(function() {
  $('[data-toggle="tooltip"]').tooltip({
      html: true
  });
});

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
        <script src="main.js"></script>
</head>
<body>
  <script src="lightbox-plus-jquery.min.js"></script>
</body>

check your console, is this `TypeError: $(…).tooltip is not a function` the only error you see? — Luthando Ntsekwa, Jul 21 '16 at 13:23
i have also tried cdn @ganesh but still not getting rid of this error — Gagandeep, Jul 22 '16 at 16:46
this is the only error i see in console. @TheFlash everything else is working fine however i found a sloutionjust by removing the whole function from the main.js file and added to the index.php under script tags becuase i needed tooltip for only that page. — Gagandeep, Jul 22 '16 at 16:46
@Gagandeep You do not happen to have 2 versions of jQuery on the page? — epascarello, Jul 22 '16 at 17:02
No i dont have two versions on my page and it is 2.1.4 @epascarello :) — Gagandeep, Jul 27 '16 at 16:30

score 9 · Answer 1 · answered Dec 17 '16 at 17:44

9

This can happen when jQuery is included twice.

For people using Rails, jQuery is already included by default (check app/assets/javascripts/application.js):

//= require jquery

Including jQuery again, for example with a <script> tag in app/views/layouts/application.html.erb, will result in this error.

The solution is to remove the <script> tag in app/views/layouts/application.html.erb.

answered Dec 17 '16 at 17:44

vmarquet

2,384
3
25
39

@NeerajRana True, but this is common when starting to work with any framework. The framework loads jQuery, and if you are integrating already-working code from another non-framework project, it is likely also including jQuery. In my case, it happened when converting some non-Bootstrap pages to use Bootstrap. – Haydentech Aug 09 '17 at 17:10
I believe this happens when using a chat plugin like PureChat also. It loads its own JQuery. I believe that Bootstrap adds `.tooltip()` to the first (Rails) JQuery. Once the second JQuery is loaded, then you are using the second JQuery in your `$(document)` and `turbolinks:load` events. The second JQuery doesn't know about `.tooltip()`. By commenting out PureChat, the problem goes away. I'm going to test to verify the function exists before I call it with `if (typeof jqueryobject.tooltip === "function")`. – Chloe Jan 02 '18 at 18:59
Oh man! This is the only time I've seen someone say this, and this was my issue. Ugh, what a stupidly simple thing. Thanks! +1 – EFDesign Jun 21 '18 at 14:33

score 0 · Answer 2 · answered Jan 21 '21 at 18:26

My favorite part of jQuery UI is tooltip(), and I often forget that it has not always existed in jQuery UI. It was added for version 1.9...

version added: 1.9 (Source: API.jQueryUI.com: Tooltip Widget.)

If you don't have a version of jQuery UI at version 1.9 or higher, you'll get the error: tooltip() is not a function().

TypeError: $(…).tooltip is not a function

2 Answers2

Linked