Bootstrap Popover not reponsive-CodePudding

The popover does not display the image correctly when opened for the first time.

Any idea how I can make sure that it always displays correct?

This is the button:

<button type="button"  data-rel="popover" title="<strong>Heading</strong>" data-placement="right" data-content="<img src='https://picsum.photos/400'>"> Click me </button>

this is the JS:

$(document).ready(function() {
    $('[data-rel=popover]').popover({
      html: true,
      trigger: "hover"
    });
  })

CodePudding user response：

You can use popover template property to make image responsive inside the popover also use img-fluid class to img tag.

$(document).ready(function () {
        $('[data-rel=popover]').popover({
          html: true,
          trigger: "hover",
          template: `<div  role="popover">
                      <div ></div>
                      <div ><h4>Heading</h4></div>
                      <img src="https://picsum.photos/400" alt="Image" >
                    </div>`
        });
      })

img{
  width:100%;
}

<script src="https://homylive.com/erp/assets/js/jquery.min.js"></script>
<script src="https://homylive.com/erp/assets/bootstrap/js/bootstrap.min.js"></script>

<link href="https://homylive.com/erp/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<button type="button"  data-rel="popover" title="<strong>Heading</strong>" data-placement="right"> Click me </button>

CodePudding user response：

It sounds like you want the image to be responsive inside the container. For starters, add the styles width:100%; height:auto to your image to see what that does. (And then I'd recommend refactoring by using css in place of the inline style.)

<img src='https://picsum.photos/400' style='width:100%; height:auto'>

Using bootstrap's styles, it would be-

<img src='https://picsum.photos/400' class='img-responsive'>

https://jsfiddle.net/ho2btzga/