Bootstrap Tour 删除了每一步的高亮元素

Question

这是我第一次使用这个库，我遇到了一个很奇怪的问题。我正在使用独立的 v0.10.1 版本。

这是我的代码：

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();
    }
});

每次我单击 prev/next/end 导览时，它都会删除工具提示（很明显），并且还会用 "display:none" 隐藏我与该步骤相关的突出显示元素。它不应该隐藏我的元素，不是吗？

我发现避免这种情况的唯一方法是放置此代码：

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

我还查看了 bottstrap-tour 代码并在 hideStep 函数中找到了导致此问题的行：

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

如果我删除 "popover('destroy')"，它会按预期工作，但是当单击“结束游览”时它不会删除步骤工具提示，因此这不是解决方案。

知道发生了什么吗？

Answer 1

经过一天的研究，我发现这是怎么回事。

基本上，PrototypeJS 库与 Bootstrap 不兼容，Bootstrap Tour 正在使用其工具提示 class。

在这里你可以看到原因： https://github.com/twbs/bootstrap/issues/6921

我刚刚所做的是评论这一行：

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
}

这样可以避免触发 PrototypeJS 隐藏事件。

现在它按预期工作了。

Bootstrap Tour 删除了每一步的高亮元素

Bootstrap Tour removes the highlighted element of each step

javascript

prototype

hide

prototypejs

bootstrap-tour