The picture within the bootstrap popover is spilling out of the popover

I need help resolving an issue on my webpage where images in popovers overflow when they reach a certain size. I used an online demo to create the page, but now I'm encountering this problem. How can I fix it?

Check out the Js Fiddle for reference: https://jsfiddle.net/rdvL6kj9/10/

html:

  <div class="container my-4">
    <p class="font-weight-bold">Need assistance with adjusting popover image sizes? This example demonstrates how to include an image within a bootstrap popover.</p>

    <a class="btn btn-primary" data-toggle="popover-hover" data-img="https://placekitten.com/500/300">Hover
      over me</a>
  </div>
  
...snip...

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

Below is a screenshot illustrating the issue: https://i.sstatic.net/TStdD.png

csstwitter-bootstrapbootstrap-4popover

Answer №1

After some trial and error, I have finally found the solution to this query. For those who may come across this issue in the future, here is the solution: If you are comfortable with reducing the size of the image, you can follow Sai Manoj's suggestion. However, if you prefer to enlarge the image, you will need to override the max-width property within the popover class by adding the following code snippet:

.popover {
    max-width: none;
}

Answer №2

You were so close! I just added a built-in Bootstrap class class="img-fluid" to the img tag for responsive images.

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

Check out the working example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a variable into a CSS class

Currently, I am working on developing a component that creates an animation loop with a duration that is passed as a prop to the component. The issue I am facing involves using CSS to create the animation: animate:{ -webkit-transition: 10.0s !important ...

cssvue.jsvue-componentcss-animations

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...

javascripthtmlcssnpmchart.js

Expanding an element to cover all columns in a grid with automatically generated columns

I am working on a CSS grid layout with automatic columns and 2 rows. All elements are normally placed in the first row except for one special element that should span both rows while filling all available column space. My current code looks like this: ...

csscss-grid

Ways to vertically align a div in Bootstrap 4?

As I delve into working with bootstrap 4, I am experimenting with creating various basic layouts. In line with the guidelines provided in bootstrap 4 documentation, I aimed to vertically align block elements by applying the class align-items-center. Despi ...

cssbootstrap-4

Uncovering the source of glitchy Angular Animations - could it be caused by CSS, code, or ng-directives? Plus, a bonus XKCD comic for some light-hearted humor

Just finished creating an XKCD app for a MEAN stack class I'm enrolled in, and I'm almost done with it. However, there's this annoying visual bug that's bothering me, especially with the angular animations. Here is the link to my deploy ...

javascriptcssangularjsuiviewanimationangularjs-digest

To create a distinctive design, the HTML5 wrapper will specifically enclose the Header element

After using a border, I discovered that my wrapper is only wrapping the header and not extending down to the footer. Can anyone offer some guidance on how to wrap the entire content from the header to the footer? I've come across suggestions to speci ...

htmlcsswrapper

Incorporating a recurring image beneath a navigation menu

I'm attempting to recreate a header that has a similar appearance to the following: https://i.stack.imgur.com/uVXs3.png However, I am facing challenges in generating the repeating diamond design beneath the black bar. The diamond pattern resembles t ...

htmlcss

Subscribe on Footer triggers automatic scrolling to the bottom of the page

Whenever I fill out the form in the footer and hit submit, it directs me to a different page while automatically scrolling back down to the footer. I'm looking for a solution that prevents this automatic scrolling. I've attempted using window.sc ...

javascripthtmlcss

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Hey everyone! I'm currently working on implementing a mouse follow effect, but I'm facing an issue where the circle I've created moves along with the page when scrolling, instead of staying fixed to the mouse. Any suggestions or tips would b ...

javascriptjqueryhtmlcss

Position elements to the right side of a flex container

I'm utilizing Bootstrap 4 along with this CSS class to vertically align my elements: .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-i ...

htmlcsstwitter-bootstrapflexboxtwitter-bootstrap-4

Step-by-step guide: Crafting an UP Arrow solely with HTML and CSS

What is the method to utilize solely HTML and CSS for creating a triangle? I am in need of constructing a thick triangle, but want to achieve this using only CSS So far, I have experimented with the following code: .arrow-up { width: 0; height: 0 ...

htmlcss

The page is having trouble loading images

My goal is to display sliding images in a web application using Bootstrap carousel. The images are fetched from the backend and stored in the 'images' state. Below is the JSON format of the data that is retrieved: images:[ { SNO:'1', NA ...

javascriptreactjsbootstrap-4

Customize YouTube iframe styles in Angular 4+ with TypeScript

Has anyone been successful in overriding the style of an embedded YouTube iframe using Angular 4+ with TypeScript? I've attempted to override a CSS class of the embed iframe, but have not had any luck. Here is the URL to YouTube's stylesheet: ...

javascriptcssangulartypescriptangular5

What's the deal with z-index not functioning properly?

Below is my simple HTML and CSS code: HTML: <div class="header"> <div class="tip"></div> </div> CSS: .header { display: block; width: 260px; min-height: 222px; background-color: #252525; position: relati ...

htmlcsspositionz-index

Using jQuery to create a div that animates when scrolling

Recently, I came across this interesting code snippet: $(document).ready(function(){ $(window).scroll(function(){ if($("#1").offset().top < $(window).scrollTop()); $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fix ...

jquerycss

How can you center a left floated div?

I am seeking to showcase a series of images in a horizontal layout on my page. Beneath each image, there are several links that need to be grouped together within a container. So far, I have tried placing them in floating divs, which align them to the lef ...

htmlcss

The ID is specifically assigned to the anchor element produced by React Bootstrap, rather than the surrounding div

Previously, I utilized the 'ml-auto' class in my navbar to push the dropdown all the way to the left. However, I encountered a problem when the screen size decreased and the navbar orientation changed to vertical. To address this issue, I attemp ...

reactjsbootstrap-4next.jsreact-bootstrap

Interested in creating a weather application that changes color based on the time of day

My attempt to create a weather app with a glowing effect has hit a roadblock. I want the app to glow "yellow" between 6 and 16 hours, and "purple" outside of those hours. I have assigned classes for AM and PM elements in HTML, and styled them accordingly i ...

javascripthtmlcssbootstrap-4

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

javascriptcssreactjsflexbox

Yeoman webapp error: Issue with incorrect CSS path in subfolder

I have been using the yeoman webapp generator (0.5.0) and my app directory is structured like this: app/ ├── dir1 │ └── index.html ├── favicon.ico ├── images ├── index.html ├── robots.txt ├── scripts │ └ ...

htmlcssweb-applicationsgruntjsyeoman