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

I'm trying to use this code with those tooltips. In this link: Code with tooltip. In fact I just copied the whole code but it's now working. I get an error that says Uncaught TypeError: $(...).tooltip is not a function error:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>
  $(function() {
    $(document).tooltip({
      position: {
        my: "center bottom-20",
        at: "center top",
        using: function(position, feedback) {
          $(this).css(position);
          $("<div>")
            .addClass("arrow")
            .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo(this);
        }
      }
    });
  });
</script>

What is missing here?

Edit:

<script>
jQuery( document ).ready(function( $ ) {
   $('.hasTooltip').tooltip();
});
</script>

Using it like this, solved my problem!

javascriptjquerycssjquery-ui


Solution 1:[1]

You are including two times the jQuery UI for different versions. This might be causing conflicts. Try removing

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Solution 2:[2]

You are getting the error because jquery-ui is loaded after your script is executed. you can try to add type="text/javascript" to your scripts normally this must resolve the issue or you must wait until the script is loaded to execute your tooltip. so you must creat a function that will execute your script after the jquery-ui is loaded.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Henrique M.
Solution 2 Alaa

Related Questions