Vishnu Vishnu - 21 days ago 12
HTML Question

Bootstrap: popover button link not working

I have used bootstrap popover with some customized jquery. Popover function is working fine but if i have add a button with an external link, its not working. See the code: there is two buttons "Button1" for popover & "Button2" for external link.



$(document).ready(function () {
$("body").tooltip({
selector: "[data-toggle='tooltip']",
container: "body"
})
.popover({
selector: "[data-toggle='popover']",
container: "body",
html: true
});
});

$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if(!$(this).is(e.target) &&
$(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
<a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title="">
Button1
</a>

<a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a>
</div>




Answer

The stack overflow scripts are blocking your link from opening a new page/redirect. Try this codepen with your code : http://codepen.io/TunderScripts/pen/oYYbgW

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
  <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title="">
    Button1
  </a>

  <a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a>
</div>


$(document).ready(function () {
  $("body").tooltip({   
    selector: "[data-toggle='tooltip']",
    container: "body"
  })
  .popover({
    selector: "[data-toggle='popover']",
    container: "body",
    html: true
  });
});

$('body').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    if(!$(this).is(e.target) &&
       $(this).has(e.target).length === 0 &&
       $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});