CODEWITHSUNDEEP
jquerybootstrap-4popover
Ahsan Habib
Ahsan Habib

Reputation: 167

Bootstrap 4 popover a div

I want to show on click a button popover a div on top. And click outside hide. HTML:

<button class="pop-show" type="button">Show</button>

<div class="pop-inn">
    <p>content</p>
    <h5><img src="img.png" alt="image">Candidate</h5>
</div>

JS:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

Upvotes: 1

Views: 1316

Answers (1)

Reverend Pete
Reverend Pete

Reputation: 815

I am assuming that you want the contents of the pop-inn div to be what is displayed in the popover when you click the button?

So there are a few things I have changed in the working snippet below. First off, for a popover to be able to be dismissed when clicking outside of it, it must be an <a> tag, not a <button>, but you can style links as buttons (which is why I added the btn btn-primary classes.)

Then I passed a bunch of options to the .popover() method.

  1. html: true tells it that it is displaying html, not plain text.
  2. trigger: 'focus' tells it to dismiss the popover when you click outside it.
  3. content: tells it what to place in the popover. In this case, I just made a function that grabs the html content of the pop-inn div. (The content option needs to use a function to return html, or you get an error).

Hope this helps!

$(function () {
  $(".pop-show").popover({
    html: true,
    trigger: "focus",
    content: function() {
      return $('.pop-inn').html();
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<a class="pop-show btn btn-primary" tabindex="0" type="button" style="margin:100px;" data-toggle="popover" title="Your Popover Title" data-content="">Show</a>

<div class="pop-inn" style="display:none;">
    <p>content</p>
    <h5><img src="img.png" alt="image">Candidate</h5>
</div>

Upvotes: 2

Related Questions