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
Why does the Popover.Panel element fade in from the right slighty the first time the button is clicked but fades in normally every time after that?
This is the react component that uses headlessui and popper.js for placing the panel.
The issue is when the page first loads and I click the button, the panel fades in slightly from the right but when i click the button everytime after that it fades…
0
votes
1 answer
Get popper to work on my squarespace site
I'm trying to add popper.js to the pricing page on my Squarespace site. Following the instructions from a squarespace video, I added below to the of my page under page settings -> advanced -> page header code injection.
To initialize Tippy.js, I use…
daVinci
- 315
- 2
- 15
0
votes
1 answer
How to use and initialize bootstrap5 tooltip in nuxt (data-bs-toggle="tooltip" )?
Bootstrap 5 documentation says I have to add this code to initialize tooltips.
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new…
HenryAveMedi
- 131
- 1
- 5
0
votes
0 answers
Upgrade to Angular 13 issues
I'm upgrading Angular 12 and VS 2019 .net Framework 4.7.2/C# application to Angular 13 (It was originally written in Angular 6 and upgraded from there)
First, it is taking too long to compile...like 45 min or so
After wasting a lot of time, I have…
SilverFish
- 1,014
- 6
- 28
- 65
0
votes
0 answers
Tippy not rendering content properly
I am trying to use Tippy.js to render a detailPopup card component whenever the user clicks on an icon. works normally but it seems like the detail component is being rendered on top of another content by Tippy thereby causing an overlap. As shown…
Patrick Amaechi
- 1
- 1
0
votes
0 answers
Importing the right Popper.js version in Bootstrap when bundling with Rollup
I am building a Rails 7 project with Rollup as JS bundler and Bootstrap (5.2.3) for styling.
When I try to use any of the Bootstrap modules which depend on Popper (2.11.7), I get an error because Bootstrap seems to imports the Node version of Popper…
fre
- 138
- 7
0
votes
0 answers
Bootstrap Blazor Popover - Can't display table
I'm using Bootstrap Blazor, and can't figure out how to display a html table inside a PopOver.
According to documentation on blazor.zone, it should be possible to use this in a PopOver.
I found that there are some Sanitizer javascript that can be…
user1419056
- 733
- 1
- 5
- 9
0
votes
1 answer
How to style react-popper using render props in class components
Just updated to react-popper 2.3.0 and @popperjs/core: "2.11.6
Tring to set the style as desribed on it's own doc, but writing:
opened
} strategy="fixed" /> returns the error Property 'red'…
Alberto3
- 35
- 2
- 4
0
votes
1 answer
how to get single Popper to render in mapping using React usePopper
I have a mapping in a reactstrap table. The first of every row should open a popper/tooltip like this:
I added the popper to my code using usePopper hook from react-popper library.
I'm successfully rendering the popper but since the element is…
giosan
- 291
- 1
- 4
- 15
0
votes
0 answers
popper js not showing on mobile version
I'm using Popper.js.org on my wordpress website http://3.97.176.72/locations. when you click view timings under locations, it show a pop up with some timings. It is working fine on laptop screen but when I switch to mobile device or tablet, I'm…
0
votes
0 answers
Popperjs align tooltip to header
I would like to make the tooltip align to the header or at least do not stay closer to the left than the header.
But I tried to use preventOverflow and it doesn't work.
Here is the example code:
https://codesandbox.io/s/adoring-estrela-yb2k8j
What I…
yurra
- 25
- 5
0
votes
1 answer
Issue positioning popper tooltip inside scaled iframes
I'm having issue positioning popper on a scaled iframe element.
In the screenshot you can see that the element is wrongly positioned both on the X and Y axis. The scale is applied with a css rule transform: scale(x)
In this sandbox you can…
endosama
- 63
- 1
- 5