Destroy Bootstrap Popover with selector option

742 views Asked by At

How do you destroy a Bootstrap popover created with a selector option? e.g.

$e.popover({
  selector: 'mark',
  trigger: 'hover',
  container: "body",
});

If you then call $e.popover('destroy') you get an error.

I note that the Plugin function called by popover('destroy') is as follows:

 function Plugin(option) {
    return this.each(function () {
      var $this    = $(this)
      var data     = $this.data('bs.popover')
      var options  = typeof option == 'object' && option
      var selector = options && options.selector

      if (!data && option == 'destroy') return
      if (selector) {
        if (!data) $this.data('bs.popover', (data = {}))
        if (!data[selector]) data[selector] = new Popover(this, options)
      } else {
        if (!data) $this.data('bs.popover',(data = new Popover(this, options)))
      }
      if (typeof option == 'string') data[option]() /// <<-- THIS ALWAYS FAILS
    })
  }

If you call $e.popover('destroy') the above line (clearly marked) always fails because it is calling data['destroy'], however the data will be an object like {mark: Popover}.

It should clearly be calling data['mark']['destroy'] but it is not immediately clear to me how this is supposed to happen.

One option is to create a string s = 'destroy' then add the selector property to the string, but it should be apparent that that is not the intended design.

Alternatively, one could call $e.data('bs.popover').mark.destroy(), but again I am not sure that's the intended design, and it's not documented anywhere I could find.

Here's a sample jsFiddle

1

There are 1 answers

0
Brian M. Hunt On BEST ANSWER

As Matt commented, this is a Bootstrap bug in 3.3.1.