引导弹出框功能答案

【问题标题】：Bootstrap Popover functionality引导弹出框功能
【发布时间】：2016-10-25 00:38:09
【问题描述】：

我有两个引导弹出框，它们应该能够打开侧面板。

另外请在JSFiddle中找到相关代码 https://jsfiddle.net/bob_js/eLLaacju/

我想解决以下问题：弹出框应在 data-trigger="hover" 上打开并保持其内容不变，如果我们可以单击文本（单击我），它应该打开一个侧面板。 data-trigger='focus' 也无济于事。

你能帮帮我吗，下面是它的相关代码。

HTML

<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i>

<div id="popover-content-a" class="hidden">
 <div>
  <h6><b>Heading</b></h6>
   <p>Content <a href="#">Click Me</a></p>
 </div>
</div>


<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i>

<div id="popover-content-b" class="hidden">
 <div>
  <h6><b>Heading</b></h6>
   <p>Content <a href="#">Click Me</a></p>
 </div>
</div>

jQuery:

$(function () {
  $("#popover-a").popover({
    html: true,
    content: function(){
      return $('#popover-content-a').html();     
    }
  });
  $("#popover-b").popover({
    html: true,
    content: function(){
      return $('#popover-content-b').html();     
    }
  });
})

CSS：

.hidden{
 display: none;
}

【问题讨论】：

你能把jsfiddle放进去吗？显示当前结果
jsfiddle.net/bob_js/eLLaacju
@DonaldWu 请您检查一下。在小提琴中，悬停时弹出窗口会打开，但我希望它保持不变并希望单击“单击我”，这将打开侧面板，并且只要“单击我”关闭，它也应该关闭。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

下面的代码对我有帮助：

$(function () {
  $("#popover-a").popover({
    html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
    content: function(){
      return $('#popover-content-a').html();     
    }
  });
  $("#popover-b").popover({
    html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
    content: function(){
      return $('#popover-content-b').html();     
    }
  });
})

【讨论】：