侧边栏中的 Bootstrap 弹出框

Question

我想以这样一种方式使用 Bootstrap 的弹出窗口功能，使窗口在侧边栏中打开，而不是与触发按钮/文本相邻，但我不知道它是如何工作的。我尝试为侧边栏提供一个 ID，并包含属性 data-viewport="#sidebar" 但这似乎不起作用。
我是一名试图为我的班级做点事情的老师，而不是程序员或其他任何东西，所以任何帮助都将不胜感激。
这是我正在寻找的模型：http://i.imgur.com/IYPFlOC.jpg

这是我所拥有的：

  <div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div id="sidebar">
                Sidebar where the popup window should appear.
            </div>
        </div>

        <div class="col-sm-8">

            <p>This is the main content where the <span class="pop"
            data-content="Popover Content" data-html="true" data-toggle=
            "popover" data-trigger="hover" tabindex="0" title=
            "Title">trigger text</span> would be.</p>
        </div>
    </div>
</div>

Answer 1

这是一个粗略的例子，说明我认为您正在努力实现的目标。

JSFiddle：Example Code

<div class="container">
<div class="row">
    <div class="col-sm-4">
        <div id="sidebar">
            Sidebar where the popup window should appear.

            <span data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Sidebar where the popup window should appear.</span>
        </div>
    </div>

    <div class="col-sm-8">
This is the main content where the
        <a id="btn">trigger text</a>
        would be.
    </div>
</div>

$(function () {
    $("#btn").on("click", function(){
        $('[data-toggle="popover"]').popover("toggle")
    });
});