This repo powers popper.js.org
The website is using Gatsby.
# install modules
yarn
# run the server
yarn develop
🍿🦉Website and Documentation for Popper and friends
Home Page: https://popper.js.org
License: MIT License
This repo powers popper.js.org
The website is using Gatsby.
# install modules
yarn
# run the server
yarn develop
Tutorial shows the example implementation and we can find there:
show() {
...
modifiers: [
...options.modifiers,
{ name: 'eventListeners', enabled: true },
]
options.modifiers
is an array, so the above code keeps on adding new object at each call of show()
.
The same mistake is in hide()
function.
You should change it to something like that:
function enableListeners(modifiers, value) {
const modifier = modifiers.find((x) => x.name === 'eventListeners');
if (!modifier) return [...modifiers, { name: 'eventListeners', enabled: open }];
modifier.enabled = value;
return modifiers;
}
show() {
...
modifiers: enableListeners(options.modifiers, true)
...
https://codesandbox.io/s/react-popper-v2x-issue-template-forked-59dv1
Follow tutorial: https://popper.js.org/docs/v2/tutorial/#functionality
position: relative
(this is a part of page layout). Without position: relative
in ant parents an arrow will be positioned wrong.display: none
, similar to tutorial.display: block
, similar to tutorial.Tutorial lead you right to the bug which wouldn't be fixed (#413).
A popper positioned correctly. Tutorial helps you. Tutorial does explain or mention a problem with display: none
positioning, and doesn't advice well-known buggy things without well-known solutions to workaround them.
A popper position is wrong at first render. However if you resize viewport or scroll it, a popper will take correct position. You are trying to research what did you do wrong. Tutorial mess you.
floating-ui/floating-ui#413 was found a time ago after a bug hitted. I suppose, I should to initialize a popper only after it becomes display: block
and destroy when it becomes display: none
. In theory it should to work.
@popperjs/core
: 2.6.0
The createPopper
link on this page is broken.
First first sentence.
Hi Guys,
I've created a popover component using the popper js, but always initial position is redering wrong. To fix the position i need to scroll so after to interect with the DOM the position change and become perfect.
I'm using classes, fade-in & fade-out to control the visibility follow below the classes.
The animations are using opacity to looks smoother.
&.fade-in { animation: fade-in 0.5s ease; visibility: visible; }
&.fade-out { animation: fade-out 0.5s ease; visibility: hidden; }
Someone have faced it before or has some idea how to solve it?
Both reference and popper are inside of container, when hover from different angles, tooltip's popper position gets changed.
Note: When we hover the tooltip from left, right and bottom angles tooltip appears properly, but when we hover it from top then it breaks and appears randomly somewhere on the screen.
https://popper.js.org/docs/v2/modifiers/#custom-modifiers says:
Is it possible to add custom modifiers, written by you, by defining them in the options.modifiers array during a Popper instantation.
It shall start with “It is possible…”.
https://popper.js.org/docs/v2/tutorial/#arrow suggests this call:
<div id="tooltip" role="tooltip">
My tooltip
<div id="arrow" data-popper-arrow></div>
</div>
and
#arrow,
#arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
As far as I can see, the arrow
modified assigns the element with id="arrow"
to state.elements.arrow
. The appyStyles
modifier sets state.elements.arrow.style.position='absolute'
.
This means, that by following the tutorial the position
style for the arrow-element is set twice to absolute: once using CSS and once by Javascript.
Please adjust either the tutorial, not to recommend setting explictly #arrow, #arrow::before { position: absolute }
, or the arrow/applyStyle modifiers not to set for the arrow-element position: absolute
.
E.g. the example shall set position: absolute
for #arrow::before
, but not for #arrow
itself.
Moved from floating-ui/floating-ui#1528.
People are able to read the text
People are not able to read the text
Website: https://popper.js.org/
Yellow is #FFE69D Background is #FFE4E0
Screenshot from https://accessible-colors.com/:
Thank you in advance for looking into this.
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 unable to click and view the popup. Is there any fix about it right now?
here is the code
View Timings
Mon: | 12:00 PM - 09:00 PM |
---|---|
Tue: | 12:00 PM - 09:00 PM |
Wed: | 12:00 PM - 09:00 PM |
Thu: | 12:00 PM - 09:00 PM |
Fri: | 12:00 PM - 09:00 PM |
Sat: | 12:00 PM - 09:00 PM |
Sun: | 12:00 PM - 09:00 PM |
<script>
const button_mainstreet = document.querySelector('.button_mainstreet');
const tooltip_mainstreet = document.querySelector('.tooltip_mainstreet');
const popperInstance_mainstreet = Popper.createPopper(button_mainstreet, tooltip_mainstreet, {
modifiers: [
{
name: 'offset',
options: {
offset: [10, 8],
},
},
],
});
function show_mainstreet() {
// Make the tooltip_mainstreet visible
tooltip_mainstreet.setAttribute('data-show', '');
// Enable the event listeners
popperInstance_mainstreet.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,
{ name: 'eventListeners', enabled: true },
],
}));
// Update its position
popperInstance_mainstreet.update();
}
function hide_mainstreet() {
// Hide the tooltip
tooltip_mainstreet.removeAttribute('data-show');
// Disable the event listeners
popperInstance_mainstreet.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,
{ name: 'eventListeners', enabled: false },
],
}));
}
const showEvents_mainstreet = ['mouseenter', 'focus'];
const hideEvents_mainstreet = ['mouseleave', 'blur'];
showEvents_mainstreet.forEach((event) => {
button_mainstreet.addEventListener(event, show_mainstreet);
});
hideEvents_mainstreet.forEach((event) => {
button_mainstreet.addEventListener(event, hide_mainstreet);
});
</script>
it is really urgent as I've a demo tonight :)
It appears popperjs
was renamed to floating-ui
and officially released a few months ago. Although looking at https://popper.js.org/ there is no mention of this change.
I think it would be helpful to have a banner similar in content to what's on the floating-ui readme here, describing this change and directing users to https://floating-ui.com/.
I'm using @popperjs/core
version 2.5.3
to open my component under a dropdown. it works fine but when user opens the popper in small monitors the bottom of the popper will be cut off, so with detectOverflow()
you can see the bottom of rect has a positive digit.
I want to open the popper in the middle of the screen so that the user can see the whole popper, I've spent a lot of time to figure out how to change the coordinate of the popper's rect to show it in the middle of the viewport but it seems there is no way to apply a computed coordinate base on the viewport to the popper that's just been opened. could you guide me a solution to address this issue?
thanks in advance.
User-Agent Reduction Origin Trial and Dates
I don't know what kind of question this is and report back to you
I am currently updating react-popper
from version 1 to version 2 in my project. This migration has gone smoothly for the most part, except for an issue I've encountered when using popper in a table.
In the previous version, as I scrolled horizontally through the table, a button remained sticky at the end of the currently visible part of the table, with the translate3d value changing linearly as expected. However, in the migrated code, the button now appears at the absolute end of the table instead of being sticky. Additionally, the translate3d value behaves unexpectedly; it initially shows the correct value, but as soon as I scroll slightly to the left, it turns negative, which seems incorrect.
Previous V1 Code:
const PopperElement = memo(({ expanded, style, refProp, placement, update, isBucket, children }) => {
// eslint-disable-next-line
useEffect(() => update(), [expanded, isBucket])
return (
<div data-placement={placement} style={style} ref={refProp}>
{children}
</div>
)
})
export const PopperContainer = memo(({ children, ...props }) => {
const popperPlacement = props.mode === 'alerts' ? 'right-start' : 'left-start'
return (
<Popper placement={popperPlacement}>
{({ placement, ref, style, scheduleUpdate }) => {
return (
<PopperElement
placement={placement}
style={{ zIndex: 8, ...style }}
refProp={ref}
isBucket={props.isBucket}
expanded={R.prop('expanded', props)}
update={scheduleUpdate}
>
{children}
</PopperElement>
)
}}
</Popper>
)
})
Migrated Version 2 Code:
export const PopperContainer = memo(
({ children, referenceElement, popperElement, setPopperElement, ...props }) => {
const popperPlacement = props.mode === 'alerts' ? 'right-start' : 'left-start'
const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
placement: popperPlacement,
modifiers: [
{
name: 'adaptive',
enabled: false
}
]
})
const expanded = R.prop('expanded', props)
useEffect(() => {
if (update) {
console.log('here update')
update()
}
}, [expanded, props.isBucket, update])
return (
<div ref={setPopperElement} style={{ ...styles.popper, zIndex: 8 }} {...attributes.popper}>
{children}
</div>
)
}
)
I've tried to adjust the styling to force the correct behavior:
// eslint-disable-next-line no-unused-vars
const { left, top, bottom, right, ...restStyles } = styles.popper
restStyles.willChange = 'transform'
restStyles.left = 0
restStyles.top = 0
restStyles.position = 'absolute'
In the previous implementation using react-popper v1, the button maintained a sticky position at the end of the current visible portion of the table during horizontal scrolling, with the translate3d value updating linearly in a predictable manner.
After migrating to react-popper v2, the button no longer behaves as expected. Instead of maintaining its position relative to the viewport, it is now positioned at the absolute end of the table. Additionally, the translate3d values exhibit unexpected behavior: they start with the very end(with current value), but as soon as I begin to scroll left, the values rapidly shift to negative numbers, which is not the intended behavior and seems incorrect.
First of all, thank you for open-sourcing such a wonderful library.
On the page https://popper.js.org/react-popper/v2/react-portals/
As a user using reactjs using classes, I am unable put the example provided, in my context. I am seeing useState
and useEffect
everywhere and I don't know who it will fit for me in react classes.
Please add an example (if possible) showing how to use react-popper
in react classes. Thank you :)
floating-ui/floating-ui#1095 adds the mainAxis and altAxis options to the flip modifier.
https://popper.js.org/docs/v2/modifiers/flip/ does not explain what are these options good for.
Moved from floating-ui/floating-ui#1523.
It looks like this event is only for when Amsi initialization fails, so it should be named:
internal static void LogAmsiInitFailedEvent(string message, string context)
Originally posted by @PaulHigin in PowerShell/PowerShell#18727 (comment)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.