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 WebLog

Answer 1

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>

Answer 2

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

Answer 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.

Answer 4

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