Responsive design issues with Bootstrap Popover

Whenever I open the popover for the first time, the image is not displayed correctly. How can I ensure that it always shows correctly?

Here is a link to the issue: https://jsfiddle.net/n2Lfro30/1/

Below is the button code causing the problem:

<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>

And here is the JavaScript code being used:

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

Answer №1

You have the option to utilize the popover template property in order to ensure that the image is responsive within the popover. Additionally, apply the img-fluid class to the 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>

Answer №2

If you're looking to make the image adjust to the size of the container, you can start by adding the CSS properties width:100%; height:auto to your image. It's a good idea to then switch to using external CSS instead of inline styles for better organization.

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

Alternatively, you can use Bootstrap's classes for a responsive image:

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

https://jsfiddle.net/ho2btzga/

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

Is there a way to make jQuery Validate display errors within the form elements rather than outside of them?

Given the jQuery Validate basic example provided in the link below, what method can be used to display error messages within form elements whenever feasible (excluding checkboxes)? http://docs.jquery.com/Plugins/validation#source ...

jquerycssjquery-validate

Connecting various components together

I am attempting to establish a connection between various elements in order for a specific class element to trigger an action on another specific class element (for example, when .ph5 is clicked, .art5 should become visible) Here is what I have developed ...

jqueryhtmlcss

Insert JavaScript into this HTML document

I am looking to integrate the "TimeCircles JavaScript library into my project, but I am facing some challenges in doing it correctly. I plan to include the necessary files at the following location: /js/count-down/timecircles.css and /js/count-down/timecir ...

javascriptjqueryhtml

The importance of using clearTimeOut in debounce function

Could you explain the importance of using clearTimeout in debounce function? Let's take a look at the code below: const saveInput = (name) => { console.log('saveinput ', name); } const debounce = (fn, timeout = 3000) => { ...

javascript

Using ng-if to compare dates in AngularJS without considering the year

I am facing a comparison issue with dates in my code. I have one date that is hardcoded as the first day of the month, and another date coming from the database (stored in a JSON object). When I compare these dates using ng-if, it seems to ignore the year ...

javascriptangularjsasp.net-mvc

Employing a script that is generated from the jQuery AJAX response

How does using script as the response for a jQuery/AJAX request benefit us? Is it possible to directly run a function from that response script after sending the AJAX request? Any simple examples would be much appreciated. ...

javascriptjqueryajax

What is the best way to compare two arrays of ids in MongoDB to find matching elements?

I have 2 arrays with different ids : bikesWithNoOrders [id , id1 , id2] filteredResult [id3 , id5] Is there a way to query and find all of them at once? This is what I currently have: queryBuilder.find({ _id: { $in: bikesWithNoOrders } }); queryBuilde ...

javascriptnode.jsmongodbexpressmongoose

What is the process of declaring internal class variables within class methods in JavaScript?

Here's a query related to React JS. Can I define internal class variables within a method and then use them in other methods? For instance: class Something extends React.Component { state = { value: 'doesnt matter' }; somethin ...

javascriptreactjsclass

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

javascriptphphtmlajax

What is the method to access a form using jQuery? How can I extract the percentage symbol "%" from the entered amount?

I am working on developing a fee calculator using jQuery. In order to achieve this, I need to access forms. Here is the code I have so far: <form id="fee"> <input type="text" title="fee" placeholder="Place the amount that you would like to se ...

javascriptjquery

Pass the $scope object from a controller to a modal controller

I am facing an issue with transferring the $scope variable from ctrlone to ctrltwo, which is a modal window on my page. When I open the modal in ctrlone, my code looks like this: var modalInstance = $modal.open({ templateUrl: 'Modal.html&ap ...

javascriptangularjsangularjs-scopebootstrap-modal

The left margin is malfunctioning

As a newcomer to css, I am struggling with adding margin-left to my paragraph and <h2>, and it's not taking effect. I have a 700px div and I want to add a 10px margin-left to both <p> and <h2> in relation to the image. Despite my e ...

htmlcss

Navigating through a JSON object in JavaScript by employing regular expressions

Is there a way to extract the "Value" of elements "Data1", "Data2", "Data3", "Data4" from a JSON object without resorting to regex? I've heard that using regex with JSON is not recommended. <script> abc = { "model": { ... } } </script> ...

javascriptjson

Producing numerous results from a single input

How can I ensure that users input their address correctly, including street, number, entrance, floor, and apartment, into a single form field without missing any of the values? Additionally, how can I then extract each value (street, number, entrance, floo ...

javascriptphpjquery

Sending a bulky item as a straightforward argument or object

Here's a simple question - will the veryLargeObj pass as a reference in both scenarios? And if so, is there any performance difference aside from object creation? Example 1: import veryLargeObj from './here' function someFn(veryLargeObj){ ...

javascriptnode.jses6-modules

Enhance user interaction in Angular 13 by animating a selected element using just one animation block

I am currently working on a one-page website project to enhance my Angular skills, and I'm facing a challenge with animating multiple DOM elements using a single animation. Defining the animation for each element individually seems like a cumbersome a ...

javascriptangulartypescriptangular-animationsangular13

- Customizing the width of each dropdown level in a unique way

Working on a customized menu design that you can view live at: Focusing on the third level menu, I encountered an issue where all menus have the same width due to sharing the dropdown-menu class. While I understand the root cause of the problem, I am unsu ...

jqueryhtmlcsstwitter-bootstrap-3dotnetnuke

Issues arise with User obj's utilization of the Instagram API

After setting up my Instagram developer account, I was able to obtain the client_secret and client_id. Authentication went smoothly for my own user (myusername), and I received an access_token. However, when attempting to utilize this endpoint TOKEN] Fo ...

javascriptnode.jsrestinstagraminstagram-api

HashId plugin for Angular

Currently, I'm attempting to integrate into my Angular project built on the latest version. After discovering this definition file: // Type definitions for Hashids.js 1.x // Project: https://github.com/ivanakimov/hashids.node.js // Definitions by: ...

javascriptangulartypescripthashids

Sharing data between ReactJS components: Passing variables between components

I am currently working on a ReactJS project and I have the need to transmit a variable from one component to another. class Layout extends React.Component{ constructor(props) { super(props); this.state = {keyword: &apos ...

javascriptreactjs