dianping/cat · critical · Error

Popover requires tooltip.js

Error message

Popover requires tooltip.js

What it means

Popover is defined in a separate file from tooltip and deliberately extends $.fn.tooltip.Constructor.DEFAULTS (see the $.extend right after the guard). At file-eval time it checks whether $.fn.tooltip exists; if tooltip.js was not loaded first, popover.js throws immediately so it fails loudly instead of producing a broken plugin later.

Source

Thrown at cat-home/src/main/webapp/assets/js/uncompressed/bootstrap.js:1578

 * Bootstrap: popover.js v3.2.0
 * http://getbootstrap.com/javascript/#popovers
 * ========================================================================
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

  // POPOVER PUBLIC CLASS DEFINITION
  // ===============================

  var Popover = function (element, options) {
    this.init('popover', element, options)
  }

  if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')

  Popover.VERSION  = '3.2.0'

  Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
    placement: 'right',
    trigger: 'click',
    content: '',
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
  })


  // NOTE: POPOVER EXTENDS tooltip.js
  // ================================

  Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)

  Popover.prototype.constructor = Popover

View on GitHub (pinned to e815e74d4c)

Solutions

  1. Load bootstrap-tooltip.js before bootstrap-popover.js (or just load the full bootstrap.js bundle, which already orders them correctly).
  2. If using a custom build tool, add tooltip as a dependency of popover.
  3. Verify in the Network tab that tooltip.js returned 200.

Example fix

// before
<script src="bootstrap-popover.js"></script> <!-- tooltip.js missing -->

// after
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-popover.js"></script>
Defensive patterns

Strategy: validation

Validate before calling

if (typeof window.jQuery === 'undefined' || !$.fn.tooltip) {
  console.error('Load bootstrap-tooltip.js before bootstrap-popover.js (or use the full bootstrap.js).');
}

Type guard

function popoverAvailable() {
  return typeof window.jQuery === 'function' && typeof $.fn.tooltip === 'function' && typeof $.fn.popover === 'function';
}

Prevention

When it happens

Trigger: Including bootstrap-popover.js (or a custom build) without bootstrap-tooltip.js; concatenating bootstrap files in the wrong order; tooltip.js failing to load (404) while popover.js loads.

Common situations: Using the 'bootstrap.js' bundle usually avoids this — it happens with individually downloaded components, custom Bootstrap builds where tooltip was unchecked, or template pages that include popover but not tooltip.

Related errors


AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14). Data as JSON: /api/errors/ca628a95798cd69c. Report an issue: GitHub.