0

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>
James Z
  • 12,209
  • 10
  • 24
  • 44

0 Answers0