apache/hadoop · error · Error

`selector` option must be specified when initializing {} on

Error message

`selector` option must be specified when initializing {} on the window.document object!

What it means

Tooltip.prototype.init throws when a tooltip or popover is instantiated on the window.document object itself without a delegated selector: the guard is this.$element[0] instanceof document.constructor && !this.options.selector. Attaching to document only makes sense for event delegation, which needs a selector string to filter which descendants the events apply to.

Source

Thrown at hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/bootstrap-3.4.1/js/bootstrap.js:1476

    viewport: {
      selector: 'body',
      padding: 0
    },
    sanitize : true,
    sanitizeFn : null,
    whiteList : DefaultWhitelist
  }

  Tooltip.prototype.init = function (type, element, options) {
    this.enabled   = true
    this.type      = type
    this.$element  = $(element)
    this.options   = this.getOptions(options)
    this.$viewport = this.options.viewport && $(document).find($.isFunction(this.options.viewport) ? this.options.viewport.call(this, this.$element) : (this.options.viewport.selector || this.options.viewport))
    this.inState   = { click: false, hover: false, focus: false }

    if (this.$element[0] instanceof document.constructor && !this.options.selector) {
      throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!')
    }

    var triggers = this.options.trigger.split(' ')

    for (var i = triggers.length; i--;) {
      var trigger = triggers[i]

      if (trigger == 'click') {
        this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
      } else if (trigger != 'manual') {
        var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin'
        var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'

        this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
        this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
      }
    }

View on GitHub (pinned to 2add963021)

Solutions

Pass a selector for delegation: $(document).tooltip({selector: '[data-toggle="tooltip"]'})
Or initialize on concrete elements instead of document: $('[data-toggle="tooltip"]').tooltip()

Example fix

// before
$(document).tooltip(); // throws

// after
$(document).tooltip({selector: '[data-toggle="tooltip"]'});

Defensive patterns

Strategy: validation

Validate before calling

var opts = {};
if (el === document) {
  opts.selector = '[data-toggle="tooltip"]'; // mandatory for document
}
$(el).tooltip(opts);

Prevention

Always pass selector when initializing on document
Prefer binding to concrete elements or a stable container
Cover delegated-init code with a smoke test that opens one tooltip

When it happens

Trigger: $(document).tooltip({...}) or $(document).popover({...}) with no selector key in the options object — the element is the document node and options.selector is undefined.

Common situations: Migrating init code from per-element $('[data-toggle=tooltip]').tooltip() to document-level delegation and forgetting the selector; copy-pasted snippets from tutorials that init on document; dynamically inserted DOM that developers try to cover by binding to document.

Related errors

AI-assisted analysis of apache/hadoop@2add963021 (2026-08-22). Data as JSON: /api/errors/269e2b56de6fdcf0. Report an issue: GitHub.