Bootstrap Tour 移除每一步的高亮元素答案

【问题标题】：Bootstrap Tour removes the highlighted element of each stepBootstrap Tour 移除每一步的高亮元素
【发布时间】：2015-04-17 10:49:04
【问题描述】：

这是我第一次使用这个库，我遇到了一个非常奇怪的问题。我使用的是独立的 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 tour 时，它都会删除工具提示（很明显），并且还会隐藏与步骤相关的突出显示的元素，并使用“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')”，它会按预期工作，但是当单击结束游览时，它不会删除步骤工具提示，因此它不是解决方案。

知道发生了什么吗？

【问题讨论】：

标签： javascript hide prototype prototypejs bootstrap-tour

【解决方案1】：

经过一天的研究，我发现这里发生了什么。

基本上，PrototypeJS 库与 Bootstrap 不兼容，而 Bootstrap Tour 正在使用它的 Tooltip 类。

您可以在这里看到原因： 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 隐藏事件。

现在它可以按预期工作了。

【讨论】：