Javascript boostrap 3中的多个popover（popover位于popover顶部）？

我期待实现一个菜单，用户点击第一级按钮，它有一个弹出效果。然后一个用户点击第二级菜单，另一个弹出窗口出现。我试着在网上查找，但没有多少有用的信息。这可行吗？模拟图片已附在下面。

您需要根据设置您的popover内容以支持html

您需要在第一个popover之后初始化第二个popover 被触发

HTML:

CSS:

---

您可以使用

.hover（）

方法进行游戏

<button id="firstpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">
  Popover on left
</button>

<button id="secondpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-content="test" data-placement="right">  Popover on left
</button>

var second = $('#secondpopover').remove();
var first = $('#firstpopover');

second.show();
first.data('content', second);

first.popover({html: true});

first.on('shown.bs.popover', function () {
    second.popover();
})

first.on('hidden.bs.popover', function () {
    second.popover('hide');
})

#secondpopover {
    display: none;
}