Question

我有两个自举弹出窗口，他们应该可以打开侧面板。

另请在JSFiddle https://jsfiddle.net/bob_js/eLLaacju/

中找到相关代码

我想实现以下问题：popover应该在data-trigger="hover"上打开并保留，因为它有内容，如果我们可以点击文本（Click Me）它应该打开侧面板。 data-trigger="focus"也无济于事。

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

HTML：

<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" 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>
<br>

<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" 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>

</div>

CSS：

.circle-macro {
    border-radius: 50%;
    background-color: rgb(68, 104, 125);
    color: white;
    padding: 0 8px;
    font-family: 'Times New Roman';
    font-style: italic;
    z-index: 10;
    cursor: pointer;
}
.hidden{
  display: none;
}

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();     
    }
  });
})

Answer 1

现在只需将以下内容添加到我的jQuery即可解决问题。

触发：＆＃39;点击悬停＆＃39;，延迟：{show：50，hide：4000}，

$(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();     
    }
  });
})

Bootstrap popover需要一些功能

1 个答案: