CODEWITHSUNDEEP
csstwitter-bootstrappopover
renakre
renakre

Reputation: 8291

popover is not working when included inside a div

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?

Upvotes: 0

Views: 462

Answers (1)

Yin Gang
Yin Gang

Reputation: 1443

It's side effects of your css selector.

Updated fiddle

Just use the right selector on your markup, I just replace section.tabs .content div with section.tabs .content > div, then it worked.

Upvotes: 2

Related Questions