Bootstrap: Uncaught Error: No method named "destroy"

Created on 24 Nov 2017 · 4Comments · Source: twbs/bootstrap

I'm having an issue when using the bootstrap 4 themes (specifically the dashboard light UI theme).

Sometimes the tooltips appear, sometimes they don't. I frequently get the following error:

zone.js:196 Uncaught Error: No method named "destroy"
    at HTMLAnchorElement.<anonymous> (scripts.bundle.js:16102)
    at Function.each (scripts.bundle.js:3)
    at r.fn.init.each (scripts.bundle.js:3)
    at r.fn.init._jQueryInterface [as tooltip] (scripts.bundle.js:16087)
    at _tooltips (scripts.bundle.js:18776)
    at dispatch (scripts.bundle.js:4)
    at q.handle (scripts.bundle.js:4)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Zone.runTask (zone.js:192)
    at ZoneTask.invokeTask [as invoke] (zone.js:499)`

(anonymous) | @ | scripts.bundle.js:16102
-- | -- | --
  | each | @ | scripts.bundle.js:3
  | each | @ | scripts.bundle.js:3
  | _jQueryInterface | @ | scripts.bundle.js:16087
  | _tooltips | @ | scripts.bundle.js:18776
  | dispatch | @ | scripts.bundle.js:4
  | q.handle | @ | scripts.bundle.js:4
  | ZoneDelegate.invokeTask | @ | zone.js:425
  | Zone.runTask | @ | zone.js:192
  | ZoneTask.invokeTask | @ | zone.js:499
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1577

the following is the code at each error point:

line 16102             throw new Error('No method named "' + config + '"');

16086    Tooltip._jQueryInterface = function _jQueryInterface(config) {
16087      return this.each(function () {
16088       var data = $(this).data(DATA_KEY);

18776      $('[data-toggle="tooltip"]').tooltip('destroy')

Those are the only ones I think really have anything to do with the issue I'm having.

I also occasionally get this error as well

Uncaught Error: Tooltip is transitioning
    at Tooltip.hide (scripts.bundle.js:15835)
    at Tooltip._leave (scripts.bundle.js:16034)
    at HTMLAnchorElement.<anonymous> (scripts.bundle.js:15949)
    at HTMLAnchorElement.dispatch (scripts.bundle.js:4)
    at HTMLAnchorElement.q.handle (scripts.bundle.js:4)
    at Object.trigger (scripts.bundle.js:5)
    at Object.simulate (scripts.bundle.js:5)
    at HTMLDocument.c (scripts.bundle.js:5)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Zone.runTask (zone.js:192)`

I have the CSS and JS files in an angular project, this happens whether they're in the project or not. I haven't made any modifications to the javascript included with bootstrap, and I removed any custom CSS after I started getting these errors, and they persist.

Source

mattmcsparran

Most helpful comment

Following could be a quick and dirty solution if your theme and the Bootstrap version conflicts with each other.

$.prototype.tooltip = (function (tooltip) {
  return function (config) {
    try {
      return tooltip.call(this, config);
    } catch (ex) {
      if (ex instanceof TypeError && config === "destroy") {
        return tooltip.call(this, "dispose");
      }
    }
  };
})($.prototype.tooltip);

izzet on 5 Apr 2018

👍3

All 4 comments

This isn't the place for help with the themes—please use the Themes support email from the site. Alternatively, ask in Slack of StackOverflow. Or, include a reproducible example.

mdo on 25 Nov 2017

We don't have destroy methods in our plugins, instead we have dispose method and you should update your Bootstrap version to avoid the second error

Johann-S on 26 Nov 2017

I think it’s an issue with tether. I’ll try updating that. It happens with tooltips in the dashboard theme.

Sent from my iPhone

On Nov 26, 2017, at 12:53 PM, Johann-S notifications@github.com wrote:

We don't have destroy methods in our plugins, instead we have dispose method and you should update your Bootstrap version to avoid the second error

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

mattmcsparran on 26 Nov 2017

Following could be a quick and dirty solution if your theme and the Bootstrap version conflicts with each other.

$.prototype.tooltip = (function (tooltip) {
  return function (config) {
    try {
      return tooltip.call(this, config);
    } catch (ex) {
      if (ex instanceof TypeError && config === "destroy") {
        return tooltip.call(this, "dispose");
      }
    }
  };
})($.prototype.tooltip);

izzet on 5 Apr 2018

👍3

Was this page helpful?

0 / 5 - 0 ratings