Test the enabling and disabling functionality of this component by adjusting the width of the browser. Below 600px tippy will disable itself.

Popover Test

This is the content of the popover with a link.

Tooltip Test

this piece of text This is what we call a tooltip.

Use the following JaveScript code snippet to achieve this behavior on a Drupal site.

// Grab all the examples of 'bolt-popover' and 'bolt-tooltip' on the page
const popovers = document.querySelectorAll('bolt-popover');
const tooltips = document.querySelectorAll('bolt-tooltip');
const tippyInstances = [...popovers, ...tooltips];
// Create Promises to track when the web component finishes intializing
const allTippyPromises = [
  popovers.length && window.customElements.whenDefined('bolt-popover'),
  tooltips.length && window.customElements.whenDefined('bolt-tooltip'),
].filter((item) => typeof item === 'object');

Promise.all(allTippyPromises).then(() => {
  const updateTippyInstances = async (items, disable) => {
    const updateTippyPromises = items.map(async (item) => {
      await item.updateComplete;
      // Leverage the tippy 'enable' and 'disable' methods to toggle functionality
      if (disable) {
        item.tippyInstance.disable();
      } else {
        item.tippyInstance.enable();
      }
    });
    await Promise.all(updateTippyPromises);
  };

  // Resize event handler function to disable tippy on mobile
  const handleResize = () => {
    const windowWidth = window.innerWidth;
    // Use our "small" breakpoint 
    if (windowWidth < 600) {
      updateTippyInstances(tippyInstances, true);
    } else {
      updateTippyInstances(tippyInstances, false);
    }
  };

  window.addEventListener('resize', () => {
    handleResize();
  });

  handleResize();
})