Image in bootstrap popover is overflowing popover

Question

I am trying to create a page with images in popovers I used a demo online to create it but when the image gets larger than a certain size it begins to overflow out of the popover. How do I fix this?

Js Fiddle here: https://jsfiddle.net/rdvL6kj9/10/

html:

  <div class="container my-4">
    <p class="font-weight-bold">This simple example shows how to place an image within a bootstrap popover. You can
      define if you want to launch the popover on hover or on click.</p>

    <p><strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/jquery/javascript/popovers/"
    target="_blank">Bootstrap Popovers Docs</a></strong></p>

    <a class="btn btn-primary" data-toggle="popover-hover" data-img="https://placekitten.com/500/300">Hover
      over me</a>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

js:

    // popovers initialization - on hover
    $('[data-toggle="popover-hover"]').popover({
      html: true,
      trigger: 'hover',
      placement: 'bottom',
      content: function () { return '<img src="' + $(this).data('img') + '" />'; }
    });

Here is a screenshot of the issue:

score 1 · Accepted Answer · answered Nov 24 '20 at 17:43

1

You were almost there. I have added a bootstrap in-built class > class="img-fluid" to the img tag to make it responsive across all the images

   $('[data-toggle="popover-hover"]').popover({
      html: true,
      trigger: 'hover',
      placement: 'bottom',
      content: function () { return '<img src="' + $(this).data('img') + '"  class="img-fluid"/>'; }
    });

Here is the working fiddle

answered Nov 24 '20 at 17:43

Sai Manoj

3,809
1
14
35

"img-fluid" shrinks the image though. I want the image to be 500px wide but not overflow the popover. I need the popover to be bigger not for the image to be smaller. – jmona789 Nov 24 '20 at 17:55
Nevermind, got it, had to override max width on the "popover" class – jmona789 Nov 24 '20 at 18:04

score 1 · Answer 2 · answered Nov 24 '20 at 18:06

Figured it out, for anyone stumbling onto this question in the future here's the answer: If you are ok with shrinking the image you can use Sai Manoj's answer, if you want the image to be larger though you need to override the max-width property on the popover class like this:

.popover {
    max-width: none;
}

Image in bootstrap popover is overflowing popover

2 Answers2