Twitter bootstrap 边栏中的引导弹出框

我想使用Bootstrap的popover功能，使窗口在边栏中打开，而不是在触发器按钮/文本旁边打开，但我不知道如何工作。我尝试给侧栏一个id，并包括属性数据视口=“#侧栏”，但这似乎不起作用。
我是一名试图为我的班级做点什么的老师，而不是一名程序员或任何东西，因此任何帮助都将不胜感激。
这是我想要的模型：

以下是我所拥有的：

  <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>

应显示弹出窗口的侧栏。
这是触发文本的主要内容

以下是一个粗略的例子，我认为您正在努力实现的目标

JSFiddle：

---

这似乎越来越近了，但不是我想的那样。这不适用于多个弹出窗口，对吗？我在原来的帖子中添加了一个图片，以便更好地了解我想要的东西。你打算使用bootstrap popover吗？我认为自定义函数可以更好地处理这个问题。不，我根本不打算使用popover。我喜欢它在滚动时显示注释的方式，但只是想以不同的方式定位注释。如果我能以另一种方式实现这一点，我会喜欢任何指针。我更新了答案中的“示例代码”。你可以添加你自己的风格来定制外观和感觉。这太棒了！谢谢克莱顿，我真的很感激。我来玩玩这个。

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