Bootstrap Tour removes the highlighted element of each step

Question

It's the first time I use this library and I'm having a very strange issue. I'm using the standalone v0.10.1 version.

This is my code:

var tour = new Tour({ 
    backdrop: true,
    debug: true,
    steps: [
        {
            element: '#myResourcesMenu',
            title: "Title of my step",
            content: "Content of my step",
            placement: "bottom"
        },
        {
            element: '.access-unit-button:not(.disabled)',
            title: "Title of my step",
            content: "Content of my step"
        }
    ],
    onHidden: function(tour) {
        jQuery(tour.getStep(tour._current).element).show();
    }
});

Every time I click on prev/next/end tour, it removes the tooltip (obviously) and also hides, with a "display:none", my highlighted element related to the step. It should not hide my element, no?

The only way I found to avoid this, is putting this code:

onHidden: function(tour) {
    jQuery(tour.getStep(tour._current).element).show();
}

I've also looked at bottstrap-tour code and found the line that is causing this within the hideStep function:

$element.popover('destroy').removeClass("tour-" + _this._options.name + "-element tour-" + _this._options.name + "-" + i + "-element");

If I remove "popover('destroy')", it works as expected, but when clicking on End tour it doesn't remove the step tooltip, so it is not a solution.

Any idea of what is going on?

Answer 1

After a day of researching, I found what is going on here.

Basically, the library PrototypeJS is not compatible with Bootstrap and Bootstrap Tour is using its Tooltip class.

Here you can see why: https://github.com/twbs/bootstrap/issues/6921

What I've just done is comment this line:

Tooltip.prototype.hide = function () {
  var that = this
  var $tip = this.tip()
  var e    = $.Event('hide.bs.' + this.type)

  this.$element.removeAttr('aria-describedby')

  function complete() {
    if (that.hoverState != 'in') $tip.detach()
    that.$element.trigger('hidden.bs.' + that.type)
  }

  //this.$element.trigger(e) // THIS ONE

  if (e.isDefaultPrevented()) return

  $tip.removeClass('in')

  $.support.transition && this.$tip.hasClass('fade') ?
    $tip
      .one('bsTransitionEnd', complete)
      .emulateTransitionEnd(150) :
    complete()

  this.hoverState = null

  return this
}

This avoids triggering the PrototypeJS hide event.

Now it works as expected.