When displayed, Popover appears with an opacity of 0

I'm working with the Bootstrap 4 documentation and I have this button code:

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

Also, there's a JavaScript method right below it:

$(function () {
  $('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'click',
  })
})

However, when I check the HTML, I notice a new hidden div 

<div class="popover fade top in"..
It seems to be hidden due to this CSS class:

.fade:not(.show){
  opacity: 0;
}

If I remove this class, the popover shows up fine. Any suggestions on what might be causing this issue?

htmlcssbootstrap-4

Answer №1

The issue lies in the assortment of classes present on the popover. As you rightly pointed out, .fade:not(.show) is being triggered, but your classes are 

<div class="popover fade top in"..
. Therefore, the problem arises from the use of .in instead of .show. It seems like there may be a discrepancy in versions, as popovers in Bootstrap 3 typically featured in, whereas Bootstrap 4 utilizes show

Have you manually configured this anywhere using Bootstrap events? Or could it be a case of importing the incorrect version of bootstrap.js?

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

Creating HTML elements using JavaScript's Document Object Model

I am trying to create an img tag dynamically using JavaScript with the following code: <img id="drag0" src="http://localhost:34737/Images/MainSlider/A(1).jpg" class="col-4" draggable="true" ondragstart="drag(event)"> and I have a drag method setup ...

javascripthtml

The Javascript function is triggered only upon the second click

My goal is to retrieve prescription details for a specific patient, with the results displayed in a modal window. However, I am encountering an issue where the first result is only obtained on the second click. Subsequent clicks display the results of the ...

javascriptjqueryhtml

Transition effect for switching between pages with animated motion

I'm currently facing challenges in implementing page transition animations on my website. Can someone assist me with this? Here is the JavaScript code I have for animation (fading out the login form when the login button is clicked): <?php sessio ...

javascriptphpjqueryhtmlanimation

Unequal spacing between the edges of two background images

I am attempting to create two distinct "layers" of background on my webpage by encapsulating the content within a div element. Strangely, the background set for the div is being clipped before it reaches the edge of the screen, while the one designated as ...

htmlcss

"Challenges in styling a table within a div: the text fails to adhere to the

I am struggling to identify the source of a problem in my code. The issue seems to be related to the padding within the parent div, specifically with the text "1 Healthy Midday Meal for One Child Overseas" and how it is ignoring the 5px right padding. Upon ...

htmlcss

Using JavaScript arrays to populate an HTML form

I am new to JavaScript, although I have some experience with Python, and I find it challenging to integrate JS with HTML. I am attempting to convert an array into an HTML dropdown list, but I am struggling to make it function correctly. <HEAD> ...

javascripthtmlarraysformsdropdown

When JQuery is written in a separate file, it does not get applied in the HTML file

I've encountered an issue that seems to have similarities to others, but despite trying various solutions and writing JQuery code in a JS file, I can't seem to get it to work properly. When I include the path for the JS and JQuery version in the ...

javascriptjqueryhtmlvisual-studio-code

A step-by-step guide on leveraging useRef() to specifically target dynamic material-ui tabs

When attempting to upload files to a specific channel, they always end up being uploaded to the first tab or channel. I've been using useRef to try and fix this issue, but I'm not sure what exactly is missing. By "tab," I am referring to the tab ...

javascripthtmlreactjsdommaterial-ui

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

javascriptjqueryhtmlcss

Using jQuery to dynamically update the CSS of one table column depending on the attribute of another column

Welcome to my HTML table <!DOCTYPE html> <html> <body> <table> <thead> <th>Title1</th> <th>Title2</th> </thead> <tbody> <tr> <td><input type="checkbox" id=0 /></td> ...

javascriptjqueryhtmlcss

JavaScript - Utilizing an image file in relation to a URL pathway

Is there a way to reference an image URL using a relative path in a JavaScript file similar to CSS files? To test this, I created two divs and displayed a gif in the background using CSS in one and using JavaScript in the other: -My file directory struct ...

javascriptcss

Retrieve information from an HTML table on a website and transfer it to a spreadsheet in Excel

I'm looking for assistance with extracting data from a website using VBA. I have an Excel table with ETF tickers, links, and prices, and I'm attempting to retrieve the previous day's closing price from each link using VBA. The challenge I&ap ...

htmlexcelvbaselenium-webdriverinternet-explorer

PHP image retrieval is not functioning correctly and the image is not appearing as it

I'm facing some challenges when it comes to displaying images with PHP. I attempted to use this solution from Stack Overflow, but unfortunately, the image is still not appearing correctly. Within my PHP file that deals with the HTML layout, the code ...

phphtmlmysqlimage

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

javascriptcssreactjsuse-state

Changing the order of element names depending on their location within the parent element using jQuery

<div class="content"> <div> <input type="text" name="newname[name]0"/> <div> <input type="text" name="newname[utility]0"/> <div> <textarea name="newname[text]0 ...

javascriptjqueryhtmlcss

Apply the active class to only one element at a time

Presented here is a table showcasing available dates and times. Users can select a specific time by clicking on the "Choose" link. Currently, when a user selects a time, the class "active" is applied. However, the desired behavior is to remove the previous ...

jqueryhtmlcssonclick

Trouble viewing Three.js content in Index.html

My current project involves building a website using three.js with typescript. However, I am facing an issue where only the header from my index.html file is displayed when I try to load the website onto a local server. The main problem arises when I atte ...

htmltypescriptthree.js

personalized options for initiating and concluding html audio component

I am currently facing an issue with my html audio element that plays a track. The setup is quite straightforward: <audio controls loop="loop"> <source type="audio/wav" src="song.wav"> </audio> However, I need to create custom start ...

javascripthtmlgoogle-chromeaudio

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup. Version: react: '15.2.1' react-addons-css-trans ...

javascriptcssreactjsreact-routerreactcsstransitiongroup

Alter the app's entire background color in React.js with a button click

I am facing an issue with changing the background color of my entire React App when a button is clicked. Currently, I am able to change the color of the button itself but not the background. I have imported the App.css file into my project and I am looking ...

javascriptcssreactjs