bootstrap: Image inside the popover is extending beyond the window size

Question

I am currently using Bootstrap 3 popover feature for displaying a legend on click of a button

The legend is an image file and I want to display that image inside the popover window

But the image width is extending beyond the popover window width

Even on giving the width property does not change the popover window width.

Your help would be much appreciated.

HTML

<button id="btnLegend" class="btn btn-warning" data-toggle="popover">Legend</button>

Javascript

$(function () {
    $('#btnLegend').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
         'title':'Popup Test',
         'html':true,
         'container':'body'
        }
    );
});

Here is my fiddle

Krishna Rani Sahoo · Accepted Answer · 2014-11-13T09:46:28.753

4

You should add width to img tag

Here is the example

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\" style='width:100%' >",
         'title':'Popup Test',
         'html':true
        }
    );
});

If you do not want to change the width of the image to be fixed then change the max-width of popover

.popover{

    max-width:1000px !important;
}

Here is the link to the updated fiddle

edited Nov 13 '14 at 09:46

answered Nov 13 '14 at 09:02

Krishna Rani Sahoo

1,539
1
14
25

the link to your fiddle shows a different code. And I do not want the image size to be altered. I need the popover window size to extend to fit the image with its original size. Do you have a way to solve that? – VSri58 Nov 13 '14 at 09:10
@VSri58 If you do not want to change the width of the image to be fixed then change the max-width of popover `.popover{ max-width:1000px !important; }` – Krishna Rani Sahoo Nov 13 '14 at 09:51

score 1 · Answer 2 · answered May 13 '16 at 14:40

I use this solution

var $btn = $("#my_btn");
$btn.popover({
  content: '<img src="' + $btn.attr('href') + '">',
  html: true,
  trigger: 'hover',
  placement: 'left',
  container: 'body'
})
.on("show.bs.popover", function(e){
  $(e.target).data("bs.popover").tip().css({"max-width": $btn.data('width') + 50 + "px"});
});

score 0 · Answer 3 · answered May 13 '16 at 14:54

If you dont want to change the width of the image then you can just set the max-width or min-width property of popover class. EX:

 .popover{
    max-width:80%;   
}

or

.popover{
    min-width:80%;   
}

But if changing image width is not a problem, then just make the width of image as 100%. Ex:

img{
       width: 100%;
    }

score 0 · Answer 4 · edited May 23 '17 at 11:46

The popover's width is constrained to 100% of the width of its container. Set it to body and it will be wider:

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
         'title':'Popup Test',
         'html':true,
         /* Set the container for the popover (e.g. body) */
         container: 'body'    
        }
    );
});

Check out Anil's answer to this question for more info.

score 0 · Answer 5 · answered Feb 06 '20 at 19:14

0

Just limit the image and the box via CSS:

.popover {
    max-width:350px;   
}

.popover img {
    max-width: 250px;
}

answered Feb 06 '20 at 19:14

RC Cola

76
5

bootstrap: Image inside the popover is extending beyond the window size

5 Answers5