Test the enabling and disabling functionality of this component by adjusting the width of the browser. Below 600px tippy will disable itself.
Popover Test
Tooltip Test
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();
})