Popper.js is a javascript library, consider also adding the Javascript tag. Popper.js used in web applications to position poppers, an element on the screen which "pops out" from the natural flow like tooltips, popovers, drop-downs. With no dependencies, no jQuery, no LoDash, it's used by Twitter in Bootstrap v4, Microsoft in WebClipper, and Atlassian in AtlasKit.
Questions tagged [popper.js]
380 questions
0
votes
0 answers
react-bootsrap tooltips positions itself wrong on first render
Hi I am using bootstrap 5.2.1 and react-bootsrap 2.5.0 in my project. I am trying to use a tooltip with component. But when I hover over the badge tooltip overflows from the page and scrollbars mementarily activates. then it fixes itself. but this…
Deccoyi
- 29
- 1
- 7
0
votes
0 answers
react-poper usePoper hook custom offset not working
I'm trying using react-poper to create a title on hover to my component. I follow basic document to create test sample but the modifiers seem like not working.
No matter value of offset i set, the popup title alway show up at top: 0; left: 0 when…
Long Lý
- 59
- 3
- 12
0
votes
1 answer
Does bootstrap 5 css framework provide all functionality of popper js?
I am trying to modify certain things when the tooltip placement changes on scrolling the page. I can't figure out why I can't use all functionality of popper 2 js plugin.
I have tried the following, where I use Modifiers to console log when tooltip…
user31782
- 7,087
- 14
- 68
- 143
0
votes
1 answer
How to align dropdown button to content in Bootstrap 5?
I am upgrading bootstrap from 4 to 5. I found that data-toggle="dropdown" needs to be changed to data-bs-toggle="dropdown".
My problem is after I did the upgrade one of my dropdown boxes shows up on the left side of screen under the button which…
Amy Middleton
- 1
- 2
0
votes
0 answers
Issue with the popover arrow not showing up with ngx-bootstrap 8.0.0
I have upgraded the bootstrap version from 4 to 5, popper from popper to @popperjs/core version 2.11 and ngx-bootstrap to 8.0.0 . I am facing an issue where the simple example from the ngx-bootstrap is showing the arrow of the popover…
skull
- 25
- 7
0
votes
0 answers
Is it possible to customize the reference element in React Popper?
I am using React Popper to position an element relative to another. I have set up some basic code, to provide the starting structure.
export default function App() {
const [containerRef, setContainerRef] = useState(null);
const [tooltipRef,…
florinpavel
- 35
- 5
0
votes
1 answer
Popperjs constrain only by viewport
Is it possible to use popper.js to constrain a popup only by the viewport? I'm using Angular and my popups are stored as components. However, this means the component will inherit the dimensions of the parent, which sometimes means there's no room…
Atlinx
- 318
- 3
- 10
0
votes
2 answers
Using up/down keys to select list item JS/jQuery
I have a list of items that get populated dynamically based on search terms. I want the list items to be selectable/focused when using the up/down keys and ESC to hide the dropdown.
0
votes
1 answer
Angular Button tooltop is behind modal
I use Angular 13 with Bootstrap 5.0 and Mdb.
The modal I created with the help of Mdb seems to be in front of the tooltip of buttons inside the modal, so they wont get displayed properly as you can see in this image:
My Button looks like…
Chimitsu Nagase
- 167
- 1
- 9
0
votes
1 answer
How can I add animation to Bootstrap dropdowns?
How can I add animation to the dropdown? I assume by modifying popperConfig, but how?
At the moment dropdown-menu has a generated inline style, e.g. position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px,…
levipadre
- 569
- 7
- 31
0
votes
1 answer
How to create poppers on new created Cytoscape.js graph elements?
I've been trying using popper extension of cytoscape.js, starting with the code I found on the web in order to do it, at https://codepen.io/rbogard/pen/mdyRPew
It woks quite well when initializing a graph and calling the popper creation when the…
Nicolas Figay
- 11
- 3
0
votes
1 answer
Bootstrap dropdown not working in angular application
I have an angular application in which I want to use Bootstrap navbar with dropdown.
All styles from bootstrap are working just fine but the scripts are not workink e.g. dropdown not toggeling or on resize the toggle menu button not working.
I have…
vlcounj
- 1
- 2
0
votes
1 answer
Div not showing, Azure AD B2C page customisation
I used popperJS to add a popover box when the user focuses on the password field. This is an Azure AD B2C page customisation. I can see the box element is there but it's not displaying. Any help is highly appreciated, thank you!
I can see the…
Quang
- 11
- 4
0
votes
1 answer
How to import Popper for Bootstrap 5 using Gulp?
I am using Gulp to import only Collapse which I use for Navbar but now I also need Dropdown component which is relying on Popper.
If I include Popper like in the following example, I get an error in browser console Uncaught ReferenceError:…
Marko
- 1,337
- 5
- 18
- 37
0
votes
0 answers
Unable to import popper in vue project - Module not found: Error: Can't resolve @popperjs/core
I'm trying to import bootstrap js files and popper in my vue 3 project. I'm getting this error, maybe I'm doing something wrong when I import the files?
./node_modules/bootstrap/dist/js/bootstrap.min.js
Module not found: Error: Can't resolve…
user17546097