title: Bootstrap multiple data api per element
body: <p>I have an accordion that expands on click but I would also like a popover on hover.  </p>
  
  <p>Initially, I had the following code which called two "data-toggle" on one element.  This broke the popover.</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"  &gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a data-toggle="collapse" data-parent="#parent-id" href="#collapse-id" data-container="body"  data-placement="top" data-content="data to be shown on popover" class="popoverClass"&gt; 
            CLICK
          &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>.js</strong></p>
  
  <pre><code>$('.popoverClass').popover({ trigger: "hover" });
  </code></pre>
  
  <p>Next I tried to name parent div as the popover element but this broke both the accordion and the popover</p>
  
  <pre><code>&lt;div class="panel panel-default popoverClass" data-container="body"  data-toggle="popover" data-placement="top" data-content="data to be shown on popover"&gt;
    &lt;div class="panel-heading"  &gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a data-toggle="collapse" data-parent="#parent-id" href="#collapse-id"&gt; 
            CLICK
          &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It seems like there is a bug with Bootstrap that is being fixed <a href="https://github.com/twbs/bootstrap/issues/7011" rel="nofollow">https://github.com/twbs/bootstrap/issues/7011</a>, a few responses suggested using SPAN or DIV as separate elements to id the popover but I can't seem to get it to function properly.</p>
  
  <p>Here is a JFiddle with a functioning accordion</p>
  
  <p><a href="http://jsfiddle.net/L38U8/" rel="nofollow">http://jsfiddle.net/L38U8/</a></p>
  
  <p>Here is a JFiddle with functioning popover</p>
  
  <p><a href="http://jsfiddle.net/37KQt/" rel="nofollow">http://jsfiddle.net/37KQt/</a></p>
  
  <p>Here is JFiddle with working popover with accordion</p>
  
  <p><a href="http://jsfiddle.net/csaVg/" rel="nofollow">http://jsfiddle.net/csaVg/</a></p>
  
  <p>Can anyone see errors in my code?</p>
  
  <p>Any suggestions?</p>