Bootstrap Popover в боковой панели

Question

Я хотел бы использовать функцию Popstash 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") 
    }); 
});