javascript - 使 bootstrap popover 出现在与其触发器不同的元素上

Question

我正在尝试让单个“下一步”按钮创建不同的弹出窗口(弹出窗口 1、2、3 等...):每个弹出窗口都应该显示为附加到页面上的不同 div。

我们正在尝试创建一个“Take a Tour”功能，其中不同的功能由不同的弹出窗口解释。

Answer 1

手动显示/隐藏弹出窗口。

单击“下一步”按钮时，按顺序显示和隐藏弹出框:

var currentPopover = -1;
var popovers = [];

// Initialize all the popovers to be "manually" displayed.
popovers.push($("#ctrl1").popover({ trigger: 'manual' }));
popovers.push($("#ctrl2").popover({ trigger: 'manual' }));
popovers.push($("#ctrl3").popover({ trigger: 'manual' }));

// On each button click, hide the currently displayed popover
// and show the next one.
$("#NextBtn").click(function() {
  if (currentPopover >= 0) {
    popovers[currentPopover].popover('hide');
  }

  currentPopover = currentPopover + 1;
  popovers[currentPopover].popover('show');
});

以上代码未经编译或测试。