floating-ui/popper.js.org

Popper js issue on mobile devices

basharatnazeer opened this issue · 1 comments

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 :)

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