49

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

dennismonsewicz
  • 25,132
  • 33
  • 116
  • 189
  • 1
    Just came across this when trying to solve a similar problem, but I think the reason you were getting the error is that 'show' is an option and not a method, so the context for it would be: `}).tooltip("option","show");` – Andrew Mar 09 '15 at 15:42

4 Answers4

169

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
Gary Reckard
  • 277
  • 2
  • 13
Bogdan Le
  • 2,216
  • 1
  • 20
  • 21
  • 1
    Perfect! Any suggestions how to go about this if Bootstrap is being loaded in a parent template? Is there a way to selectively ignore the tooltip library of jQuery UI? – Chuck Jul 07 '16 at 00:50
  • I had a similar problem, scripts were in the correct order but I was deferring the jquery-ui script. – Souleste Mar 24 '23 at 16:52
6

The root of this and similar problem

"no such method 'hide' for tooltip widget instance"

that both JqueryUI and Boostrap have tooltip method,

JqueryUI works like: 

$el.tooltip("option","show");
$el.tooltip("option","hide");

Boostrap works like:

$el.tooltip("show");
$el.tooltip("hide");

So, as Bogdan Lewis showed you need to reorder your scripts, for example with requirejs, you need to make Boostrap be loaded after JqueryUI

var $ = require('jquery');
require('jquery_ui');
require('bootstrap');

and adjust config for requirejs like:

    bootstrap: {
        deps: ['jquery', 'jquery_ui']
    },
pymen
  • 5,737
  • 44
  • 35
3

The easiest solution for me was just to remove the tooltips components from the jQuery UI distribution I downloaded.

theV0ID
  • 4,172
  • 9
  • 35
  • 56
1

It's a conflict between Bootstrap tooltip and jQuery tooltip

Let try, pls notice their load order:

<script src='/jQuery.js'></script>
<script src='/jQuery-ui.js'></script>
<script>
    $.fn.uitooltip = $.fn.tooltip;
</script>
<script src='/Bootstrap.js'></script>
<script>
    $.fn.bttooltip = $.fn.tooltip;
</script>

=> Now, instead of using "$.fn.tooltip" you can use "$.fn.uitooltip" to call the jQuery tooltip and "$.fn.bttooltip" to call the Bootstrap tooltip:

$('.uitooltip').uitooltip(); //jQuery
$('.bttooltip').bttooltip(); //Bootstrap
Quốc Võ
  • 11
  • 2