dotnet/AspNetCore.Docs · error · Error

Popover requires tooltip.js

Error message

Popover requires tooltip.js

What it means

Bootstrap 3.3.7 ships its plugins as separate files (tooltip.js, popover.js, ...). Popover extends Tooltip, so at popover.js load time it asserts `$.fn.tooltip` exists. If tooltip.js was not loaded — or was loaded after popover.js — the constructor backbone is missing and the file throws immediately on parse. This is a dependency-order guard, not a runtime user error.

Source

Thrown at aspnetcore/mvc/controllers/testing/samples/2.x/TestingControllersSample/src/TestingControllersSample/wwwroot/js/bootstrap.js:1797

   * Bootstrap: popover.js v3.3.7
   * http://getbootstrap.com/javascript/#popovers
   * ========================================================================
   * Copyright 2011-2016 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.3.7'
  
    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 c67a80103a)

Solutions

  1. Include tooltip.js before popover.js (or just use the full bootstrap.js / bootstrap.min.js bundle which has them in order).
  2. If using a custom build tool, ensure the tooltip module is selected whenever popover is.
  3. Verify load order in the browser's Network/Sources tab — tooltip.js must appear before popover.js.

Example fix

// before
<script src="popover.js"></script>
<script src="tooltip.js"></script>
// after
<script src="tooltip.js"></script>
<script src="popover.js"></script>
// or simply
<script src="bootstrap.min.js"></script>
Defensive patterns

Strategy: validation

Validate before calling

// Ensure tooltip.js loaded before relying on Popover.
if (typeof jQuery === 'undefined' || !jQuery.fn || !jQuery.fn.tooltip) {
  console.error('tooltip.js is missing; Popover will throw. Aborting popover init.');
} else {
  $('#el').popover();
}

Type guard

function bootstrapTooltipAvailable() {
  return typeof jQuery !== 'undefined' && !!jQuery.fn && typeof jQuery.fn.tooltip === 'function';
}

Try / catch

try {
  $('#el').popover();
} catch (e) {
  if (/Popover requires tooltip\.js/.test(e.message)) {
    console.error('Load order wrong: include tooltip.js before popover.js');
  } else { throw e; }
}

Prevention

When it happens

Trigger: Including popover.js without tooltip.js; loading popover.js before tooltip.js; a custom Bootstrap build that omitted the tooltip module; a bundler/concatenation order that put popover first.

Common situations: Hand-picked script tags in _Layout.cshtml; ASP.NET bundling/minification that reorders inputs; using a stripped Bootstrap download.

Related errors


AI-assisted analysis of dotnet/AspNetCore.Docs@c67a80103a (2026-08-13). Data as JSON: /api/errors/da6539c44322003d. Report an issue: GitHub.