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
<button class="custom-locations-button button_mainstreet">View Timings</button>
<div id="tooltip" class="tooltip_mainstreet" role="tooltip">
<table>
<tr><th>Mon:</th><td>12:00 PM - 09:00 PM</td></tr>
<tr><th>Tue:</th><td>12:00 PM - 09:00 PM</td></tr>
<tr><th>Wed:</th><td>12:00 PM - 09:00 PM</td></tr>
<tr><th>Thu:</th><td>12:00 PM - 09:00 PM</td></tr>
<tr><th>Fri:</th><td>12:00 PM - 09:00 PM</td></tr>
<tr><th>Sat:</th><td>12:00 PM - 09:00 PM</td></tr>
<tr><th>Sun:</th><td>12:00 PM - 09:00 PM</td></tr>
</table>
<div id="arrow" data-popper-arrow></div>
</div>
<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>