Bootstrap Popover in Sidebar

Question

I would like to use Bootstrap's popover feature in such a way that the window opens up in a sidebar instead of adjacent to the trigger button/text, but I can't figure out how that might work. I tried giving the sidebar an id, and including the attribute data-viewport="#sidebar" but that doesn't seem to work.
I'm a teacher trying to do something for my class, not a programmer or anything, so any help would be greatly appreciated.
Here's a mockup of what I'm looking for: https://i.sstatic.net/VBp5c.jpg

Here's what I have:

  <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

Here is a rough example of what I think you are trying to accomplish.

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