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

Question

I have a project based in Spring Web model-view-controller (MVC) framework. The version of the Spring Web model-view-controller (MVC) framework is 3.2.8 deployed on a WebLogic Server Version: 12.1.2.0.0

I have this error loading 1 JSP

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

This is everything I load and I checked 1 by 1 and all of them are loaded

<link href="/tdk/styles/bootstrap.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/admin.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/jquery.dataTables.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/dataTables.bootstrap.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/slides.css" type="text/css" rel="stylesheet">

<script src="/tdk/scripts/jquery.min.js" type="text/javascript"></script>
<script src="/tdk/scripts/bootstrap.js" type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<script type="text/javascript">
  $(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    var selected = [];
    var table = $('#example').DataTable({
      "dom": '<"top">rt<"bottom"lp><"clear">',
      "autoWidth": false,
      "paging": false,
      "scrollX": false,
      "scrollY": 300,
      "scrollCollapse": true,
      "rowCallback": function(row, data) {
        if ($.inArray(data.DT_RowId, selected) !== -1) {
          $(row).addClass('selected');
        }
      },
      "columnDefs": [{
        "targets": 'nosort',
        "orderable": false
      }, ]
    });
    $('#example tbody').on('click', 'input', function() {
      $(this).closest("tr").toggleClass('selected');

      if ($(this).is(':checked')) {
        var theNameOfSelectedProduct = $(this).closest("tr").find("td.productname").text();
        $('#selecteddevices').val($('#selecteddevices').val() + " " + theNameOfSelectedProduct);
        $('#actions4devices button').removeAttr("disabled");
      } else {
        var theNameOfSelectedProduct = $(this).closest("tr").find("td.productname").text();
        $('#selecteddevices').val($('#selecteddevices').val().replace(theNameOfSelectedProduct, ""));
        if ($('#selecteddevices').val().trim().length == 0) {
          $('#actions4devices button').not('.pull-right').attr("disabled", "disabled");
        }
      }
    });
    $('#refusedevicesButtonId').on('click', function() {
      $('#theRefuseFile').show();
    });
  });
</script>

Where in relation to the jQuery UI script load is the script that calls `.tooltip` loading? — Marie, Jan 31 '17 at 15:54

score 40 · Accepted Answer · edited Oct 11 '21 at 09:25

40

Can we see where you're using $.tooltip() ? It's possible that it occurs somewhere before the jQuery UI embed line. So try re-arranging your script includes so jQuery is first, jQuery UI is second, then along through the rest.

<script src="/tdk/scripts/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/tdk/scripts/bootstrap.js" type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js" type="text/javascript"></script>

Hard to know without seeing your full code and knowing which files contains your calls to $.toolTip().

One other quick attempt would be to substitute jQuery for $ where you're using, i.e.:

$(".tips").toolTip()

would become:

jQuery(".tips").toolTip()

edited Oct 11 '21 at 09:25

Rayees AC

4,426
3
8
31

answered Jan 31 '17 at 15:54

Patrick Moore

13,251
5
38
63

3

If jQuery was the issue the error would be `$ is undefined` – Rory McCrossan Jan 31 '17 at 15:55
@RoryMcCrossan Yes, but not jQuery UI gone missing (nvm I see now what you're saying re: 2nd part of answer) – Patrick Moore Jan 31 '17 at 15:55
1

Actually I think that is it. Bootstrap.js tries to use .Tooltip. jQuery needs to exist first so load jQuery, then jQuery UI, then bootstrap – Marie Jan 31 '17 at 15:56
1

jQuery UI also has .tooltip() which may be the problem https://jqueryui.com/tooltip/ – Patrick Moore Jan 31 '17 at 15:56
This saved me..Worked well in sorting issue – PHP CODER Aug 13 '19 at 09:05

score 6 · Answer 2 · answered Jan 31 '17 at 15:57

6

Be aware that jquery-ui has its own .tooltip() function and Bootstrap does too.

Try to reorder your js files like

<script src="/tdk/scripts/jquery.min.js"              type="text/javascript"></script>
<!-- Jquery - ui right after-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/tdk/scripts/bootstrap.js"                 type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js"         type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js"  type="text/javascript"></script>

answered Jan 31 '17 at 15:57

Leo

1,051
2
13
33

2

If you're using Bootstrap's tooltip() function, you may wish to build your own flavor of jQuery UI excluding tooltip() but keeping the bits you do need. – Patrick Moore Jan 31 '17 at 15:58
As @PatrickMoore recommends, you may download a new dist without tooltip(). You can do it here https://jqueryui.com/download/. – Leo Jan 31 '17 at 16:01
2

That wouldn't cause `is not a function` error. It would just call the wrong function. – Chloe Jan 02 '18 at 18:35
1

@Chloe I do not know why the downvote, if it can be a valid answer for this question. – Leo Mar 05 '18 at 15:40

score 3 · Answer 3 · answered Apr 04 '18 at 10:37

3

It's probably due to the version of jQuery. At least it was me and I solved this problem like this. I was using jQuery 3.3.1. The problem was solved when I changed the django to 1.10.3. Add this,

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

It needs work.

answered Apr 04 '18 at 10:37

nifitovich

31
5

Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post;](https://stackoverflow.com/help/privileges/comment) instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). – mrun Apr 04 '18 at 10:57
Oh god this has caused me so much headache. Why is this an issue!?!?! Thank you for this comment. – rtconner Nov 04 '18 at 18:26

score 1 · Answer 4 · answered Aug 02 '20 at 14:50

Because jQuery 3.5.1 is getting larger it takes more time to load, in addition to the ordering of the JavaScript files, mentioned in many answers to this question, the way to go in addition to fixing the order which by the way does not always work, for Bootstrap tooltip option, a work around is to use a timeout based on jQuery loading time, example:

setTimeout(function () {
        $("[title]").tooltip({
            container: "body",
            placement: "top",
            delay: { show: 240, hide: 60 }
        });

        $("[title]").on("click", function () {
            $(this).tooltip("hide");
        });
    }, 545*1.33); // 545ms timing to load jQuery.js + network estimated delay

This was the answer in my case. I had this bug and tried the suggestions above. It still occurred but I could not get it to repeat reliably. There was actually a correlation with my connection speed. Implementing setTimeout solved it. — Milo Persic, Dec 31 '20 at 18:40

score 1 · Answer 5 · answered Jan 21 '21 at 18:28

tooltip() was only added to jQuery UI in jQuery UI version 1.9. Proof...

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().

Mices · Answer 6 · 2021-02-22T15:52:18.023

-1

To solve this you'll have to add to your gemfile:

gem 'jquery-ui-rails'
gem 'jquery-ui-themes'

Then you won't have the problem that jquery-ui isn't loading anymore Another solution is to require("bootstrap") in application.js seemingly in addition to import("bootstrap") and you have install jquery and bootstrap with yarn too I think this all pretty crazy

edited Feb 22 '21 at 15:52

answered Feb 22 '21 at 14:50

Mices

89
3
9

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

6 Answers6

Linked