18

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>
2
  • Where in relation to the jQuery UI script load is the script that calls .tooltip loading?
    – Marie
    Jan 31, 2017 at 15:54
  • 3
    no need to load jquery-ui twice
    – charlietfl
    Jan 31, 2017 at 16:00

6 Answers 6

39

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

5
  • 3
    If jQuery was the issue the error would be $ is undefined Jan 31, 2017 at 15:55
  • @RoryMcCrossan Yes, but not jQuery UI gone missing (nvm I see now what you're saying re: 2nd part of answer) Jan 31, 2017 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, 2017 at 15:56
  • 1
    jQuery UI also has .tooltip() which may be the problem jqueryui.com/tooltip Jan 31, 2017 at 15:56
  • This saved me..Worked well in sorting issue
    – PHP CODER
    Aug 13, 2019 at 9:05
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>
4
  • 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. Jan 31, 2017 at 15:58
  • As @PatrickMoore recommends, you may download a new dist without tooltip(). You can do it here jqueryui.com/download.
    – Leo
    Jan 31, 2017 at 16:01
  • 2
    That wouldn't cause is not a function error. It would just call the wrong function.
    – Chloe
    Jan 2, 2018 at 18:35
  • 1
    @Chloe I do not know why the downvote, if it can be a valid answer for this question.
    – Leo
    Mar 5, 2018 at 15:40
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.

2
1

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

0

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 
1
  • 2
    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. Dec 31, 2020 at 18:40
-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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.