Bootstrap popover needs some functionality

Question

I have two bootstrap popovers and they should be able to open the side panel.

Also please find the related code in JSFiddle https://jsfiddle.net/bob_js/eLLaacju/

I wanted to achieve the below issue: the popover should open on data-trigger="hover" and stay as it has content in which if we can click the Text (Click Me) it should open a side panel. data-trigger="focus" doesn't help either.

Could you please help me, below is the related code to it.

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

What side panel? You want something to happen when we click "click me"? — Timmy Von Heiss, Oct 25 '16 at 21:13
Possible duplicate of [How can I keep bootstrap popover alive while the popover is being hovered?](http://stackoverflow.com/questions/15989591/how-can-i-keep-bootstrap-popover-alive-while-the-popover-is-being-hovered) — RSSM, Oct 25 '16 at 21:20
Yes I need something which will open when clicked 'click me' — Bob, Oct 25 '16 at 22:31

score 0 · Accepted Answer · answered Oct 25 '16 at 23:35

Just adding the below to my jQuery helps the issue for now.

trigger: 'click hover', delay: {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 needs some functionality

1 Answers1