Bootstrap Popover not reponsive

Question

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" class="btn btn-primary" 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"
    });
  })

DCodeMania · Answer 1 · 2022-09-08T12:19:45.077

0

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 class="popover p-2" role="popover">
                      <div class="popover-arrow"></div>
                      <div class="popover-inner"><h4>Heading</h4></div>
                      <img src="https://picsum.photos/400" alt="Image" class="img-fluid">
                    </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" class="btn btn-primary" data-rel="popover" title="<strong>Heading</strong>" data-placement="right"> Click me </button>

edited Sep 08 '22 at 12:19

answered Sep 08 '22 at 11:52

DCodeMania

1,027
2
7
19

still displays wrong the first time opened – Seb.me Sep 08 '22 at 12:03
Nope here is just working fine. – DCodeMania Sep 08 '22 at 12:06
Don't use data-content in button tag now – DCodeMania Sep 08 '22 at 12:07
https://jsfiddle.net/fv67n358/ does not work with the fiddle provided in question – Seb.me Sep 08 '22 at 12:08
You are using older bootstrap version use latest one bootstrap 5 – DCodeMania Sep 08 '22 at 12:10
the project is v3.3.5 else i wouldnt be asking :) – Seb.me Sep 08 '22 at 12:10
the fiddle is also using 3.3.5 – Seb.me Sep 08 '22 at 12:11
Okay then use a css property to img tag i.e. `img{width:100%;}` it will fix your problem – DCodeMania Sep 08 '22 at 12:13
use this property in css section – DCodeMania Sep 08 '22 at 12:14
I also updated the answer as well check it now. – DCodeMania Sep 08 '22 at 12:20
first time opening the arrow is still not in the right place – Seb.me Sep 08 '22 at 12:31

score 0 · Answer 2 · answered Sep 08 '22 at 13:55

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/

Bootstrap Popover not reponsive

2 Answers2