div内に含まれているとポップオーバーが機能しない

正常に動作しているポップオーバーコードがあります。しかし、ポップオーバーがdiv内にあるときは、動作を停止します。ここでdiv内に含まれているとポップオーバーが機能しない

<section class="content-section"> 
     <h2>What Are They?</h2> 

     //this popover is working 
     <p>Also known as <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Research community) pronounced 'M-Rock'. One of the terms used for a research community." title="" data-original-title="MROC (Market Research Online Community)">MROCs</span> (Market Research Online Community) the commun only, Webs.</p> 
    </section> 
    <hr /> 
    <section class="content-section"> 
     <h2>Pros and Cons</h2> 
     <section class="tabs" style=' margin-top:15em;'> 
     <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> 
     <label for="tab-1" class="tab-label-1">Pros</label> 
     <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> 
     <label for="tab-2" class="tab-label-2">Cons</label> 
     <div class="content less-stuff"> 
      <div class="content-1"> 
      <h3>Pros</h3> 

      //this popover is NOT working 
      <p>Communities are usually larger than any set of <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Focus Group Interview or Group D with fewer participants - possibly 4-6." title="" data-original-title="Focus Group">focus groups</span>. This can allow minority opin-minded participants to take place - rich data that would never emerge in a focus group setting.</p> 
      </div> 
      <div class="content-2"> 
      <h3>Cons</h3> 
      <p>Qualitative-nflection is lost.</p> 
      </div> 
     </div> 
     </section> 
    </section>

JSFIDDLEです：https://jsfiddle.net/erkaner/46awL808/2/

あなたが最初のものはポップオーバーを示しているが、2番目の1ではない、青の背景を持つ2つの単語が表示されます。

誰でもこの問題を解決する方法はありますか？

出典

2016-05-09 renakre