I have a popover code that is working fine. However when the popover is inside a div, then it stops working.
<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>
Here is the JSFIDDLE: https://jsfiddle.net/erkaner/46awL808/2/
You will see two words with blue background, first one is showing popover, but second one is not.
Does anyone have any idea how to resolve this issue?
It's side effects of your css selector.
Just use the right selector on your markup, I just replace section.tabs .content div with section.tabs .content > div, then it worked.