Having issues with the functionality of Bootstrap 4 popover?

In my Spring MVC web project, a Bootstrap popover appears when the help icon is clicked.

However, on the first click, the popover opens and moves away from the icon. After closing it and clicking again, the popover correctly positions itself.

When I change the click event to hover, initially the popover briefly appears far from the icon and then moves back to its correct position.

If you refer to this GIF image, it will give you a better understanding.

https://www.example.com/images/GIF.gif

I am using JSP with JSTL for this project.

I copied all the code as it is to Plunker, and it works perfectly there! You can access the code on this Plunker link.

The only difference is that I'm using Tomcat 9 with JSP instead of HTML.

image

javascriptcssspringbootstrap-4jstl

Answer №1

The issue arises from the picture in the popover. When I switched to using hidden content within the popover, it worked perfectly.

                <div id="popover-content-logout" style="display:none">
                   <img class="img-responsive" src="/ressources/images/image-goes-here.jpg" style="max-height:250px;" /> 
                </div>
                // popover declaration ...
                      content: function() {
                        var id = $(this).attr('id')
                        return $('#popover-content-logout').html();
                      },

I suspect that the delay in loading the image is due to Tomcat, especially since the image is not encoded in base64 when tested locally.

Answer №2

Consider making the following adjustment:

altering the attribute from
data-toggle="popover"

to

data-toggle="popover" data-placement="left"

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

Ways to conceal a grid item in Material UI framework

My goal is to hide a specific grid item for a product and smoothly slide the others in its place. Currently, I am using the display:none property but it hides the item instantly. I have already filtered the products and now I want to animate the hiding of ...

javascriptcssmaterial-ui

Tips for avoiding a ligature occurrence in a specific location

I am a fan of ligatures in general, as they improve readability. I want to implement them across all my HTML pages. However, there is this one word Hanftierheft (which is German and a compound word made up of Hanf, Tier, and Heft). I specifically do not w ...

htmlcssutf-8ligature

Is there a way to retrieve files stored on my hard drive within a webpage?

I have a large number of files stored on my hard drive, all following the same format, 2014.C1.012.012 - full name of the file. They each have unique numbers and names. I want to create a local webpage where I can organize these files into a table w ...

javascripthtmlbash

Trouble with Spring POST JSON relationships issue

I encountered an issue while attempting to post an object with a server relationship. An error occurred. This is my entity: @Entity public class District implements Serializable { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; ...

jsonspringjparelationshipmany-to-one

Access account using lightbox effect for the login form

In my simple CSS code, I have used a litebox view. I removed unnecessary CSS properties to keep it clean: <style> .black_overlay{ display: block; } .white_content { display: block; } < ...

javascript

Selecting an option from the knockout dropdown menu

I implemented a language dropdown in layout.chtml using knockout js. <select id="Language" class="styled-select" data-bind="value: Language,options: locale, value: selectedLocale, optionsText: 'name'"></select> var viewModel = th ...

javascriptjqueryajaxasp.net-mvcknockout.js

When using momentJs to add days, it will return a moment object rather than a

How can I add 7 days to a date using momentJs in my Angular project? let startDate = "2018-08-16T02:00:00.242Z"; let newDate = moment(startDate).add(7, 'days'); I was expecting to receive the date after adding 7 days, but instead I get a momen ...

javascriptangularmomentjs

Clicked button redirects user to the parent URL

When the application is running on page http://localhost:3000/login, clicking a button should redirect to http://localhost:3000/. This is how I attempted it: import React from 'react'; import { Redirect } from 'react-router-dom'; impor ...

javascriptreactjsreact-routersemantic-uireact-router-dom

Setting the file type when uploading content: a step-by-step guide

When uploading a file to an S3 bucket, it's essential to identify the file extension and add the correct content type. $('#upload-files').on('click', function(e) { e.preventDefault(); var fileName = data.files[0].name; var ...

javascriptjquery

Issue with rendering <li> elements in Firefox browser detected

I have been working on a website and encountered an issue with the display of list elements in Firefox. The list is not showing consistently in Firefox, but it appears fine in IE, Opera, and Safari. I have attached an image below showing the difference bet ...

htmlcssfirefoxhtml-lists

Issue with Animate.css animations not working in my Vue 3 application

My goal is to incorporate some basic HTML animations into my Vue 3 application, however I am encountering issues with the Animate.css examples. More specifically, even after installing the animate css dependency using npm install animate.css --save, the s ...

htmlcssvue.jsanimationanimate.css

Turn off the highlighting for an external event in FullCalendar

Hey there, I'm currently working with the fullcalendar jquery plugin v2.6.1 and I have a question about preventing external events from being highlighted while they are being dragged onto the calendar. Is there a way to stop the fc-highlight from app ...

javascriptjqueryfullcalendarfullcalendar-2

During the execution of a function, the React list remains empty which leads to the issue of having

Having difficulty preventing duplicate values because the item list is always empty when the function is called, even though I know it contains items. The function in question is AddToCart, being passed down to a child component named inventoryModal. The ...

javascriptreactjsarraysreact-hooks

What is the process for validating a JWT token using an x.509 certificate in a Node.js environment?

I need assistance with making a node script capable of validating a JWT token. I possess the public key, which is an x.509 certificate, along with the JWT itself. My attempt to utilize https://github.com/auth0/node-jsonwebtoken proved unsuccessful as it d ...

javascriptjsonnode.jsjwt

Consistently obtaining the same outcome in JavaScript, always

Is it possible to resolve this issue? I keep getting a result of less than 18 when trying numbers 1-100, even though the output should be for values under 18. In my HTML code, there is a <p> element with id="result", an input with id=&quo ...

javascript

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

javascripthtmlcssreactjsmaterial-ui

Utilize JSON data to dynamically populate TextFields or Select menus depending on a specific key in the JSON object

As I retrieve multiple JSON groups from an API, each group contains one or more questions objects. The task at hand is to attach each question along with its corresponding response to a textField. Based on the value of QuestionType, it will be decided whet ...

javascriptreactjsjsonmaterial-ui

how to check if a string has white spaces in a react application

If the input string has white space, the alert will indicate unsuccessful. If the input string does not have any white space, the alert will be successful. import React from "react"; export default function DropDown() { let i = document.getEle ...

javascriptreactjs

Encountering a message error for the Collapse component in Material UI

I'm currently working on creating a hamburger menu using Material UI List in Next.js, inspired by the Nested List example in the Material UI documentation. However, I've encountered an error when using "collapse" in my code. The rest of the code ...

javascriptreactjsnext.jsmaterial-ui

An HTML button generated by a .js file is able to execute a .js function without any issues, but it inadvertently removes all .css styling

Currently grappling with an issue in my JavaScript self-teaching journey that I can't seem to resolve or find examples for. The problem at hand: When the HTML button calls a .js function, it successfully executes the function but also wipes out all C ...

javascripthtmlcss