Popper js issue on mobile devices
basharatnazeer opened this issue · 1 comments
basharatnazeer commented
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 :)
FezVrasta commented
Hi, this is the wrong repository. Please ask you question in the Q&A section of the floating-ui repository. Don't open an issue as they are only for bug reports. Thanks