Question

I have been using Twitter’s Bootstrap Tooltip plugin. This works perfectly fine except that when used on svg elements, it breaks. After some debugging, I narrowed down the problem. In the js file, the init function looks like this:

  , init: function (type, element, options) {
      var eventIn
        , eventOut

      ...

      if (this.options.trigger != 'manual') {
        eventIn  = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
        eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
        this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
        this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
      }

      ...

    }

I remembered there were numerous issues with SVG-IE 9.0 specific implementation so I made the following modifications:

  if (this.options.trigger != 'manual') {
    eventIn  = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
    eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
    var flag = $.browser.msie  && parseInt($.browser.version, 10) === 9
    eventIn = flag ? "mouseover" : eventIn
    eventOut = flag ? "mouseout" : eventOut

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

And this works fine in all browsers. After some searching, I found that someone else faced the same problem. I am not sure if there is a better way of fixing this bug especially after reading the argument in the link.

In IE9, there is a native contains() implementation on the document,
so jQuery uses it. The problem is that this contains() implementation
does not extend to SVG elements.

Any suggestions on whether my fix can be improved?

Answer 1

Well, I might have some suggestions but the best thing is to go on the bootstrap github and do a pull request and @fat and @mdo will certainly take a look at it before merging your code in and even give you feedback. Cheers!