Uncaught Error: no such method 'show' for tooltip widget instance

Question

I am using ajax to submit a form for my registration, but am having an issue trying to setup tooltips to display error messages for errors that come back from the controller.

JavaScript:

$(document).on('ajax:success', '.user_modal_form', function(e, data, status, xhr) {
  var context;
  context = $(this);
  if (data.success) {
    $('button', context).hide();
    $('.spinner', context).show();
    location.reload();
  } else {
    if (data.errors != null) {
      $.each(data.errors, function(key, error) {
        var field;
        field = $("#athlete_" + key);
        field.attr('data-original-title', "" + key + " " + error).tooltip({
          trigger: 'manual'
        }).tooltip("show");
      });
    }
  }
});

Error Message: Uncaught Error: no such method 'show' for tooltip widget instance

Answer 1

I had the same error, which was a conflict with jQuery UI.

If you use jQuery UI then you need to reorder your script load order.

My working load order:

• jQuery
• jQuery UI
• Bootstrap