Button Tap Activated with Finger-sliding Motion
Author: Hydra9268Created Jul 25, 2024Updated Jul 25, 2024
Labels🐛 bug🚧 unconfirmed
Bug description
After implementing Tippy.js, a coworker demonstrated a problem: they tapped a button to show the tooltip, then slid their finger to the following button, which activated that button's tooltip.
Reproduction
Steps to reproduce.
- Create or visit a page with a row of buttons and Tippy.js tooltips implemented with a click trigger.
- View the page through a mobile browser (my coworker used Chrome in her demonstration).
- Tap a button to show its tooltip, then slide your finger to another button.
- Observe that there are two visible tooltips.
Code
document.addEventListener('DOMContentLoaded', function() {
function GetContent() {
let content = `content here`;
if (window.matchMedia('(max-width: 800px)').matches) {
content += '<a class="remodal-close cursor-pointer" style="position: absolute; top: 10px; right: 15px;"><i class="fal fa-times fa-2x"></i></a>';
}
if ($('.tip9336').hasClass('unavailable-option')) {
content += '<br /><cite>Choose a different combination</cite>';
}
return content;
}
function GetWidth() {
let maxWidth = 500;
if ($('.tip9336').hasClass('unavailable-option')) {
maxWidth = 300;
}
return maxWidth;
}
if (window.matchMedia('(max-width: 800px)').matches) {
tippy('.tip9336', {
content: GetContent,
width: GetWidth,
maxWidth: 'none',
theme: 'light',
allowHTML: true,
interactive: true,
trigger: 'click',
});
function TippyCloseButton() {
document.querySelector('[data-tippy-root] .tippy-box .remodal-close').addEventListener('click', () => {
tippy.hideAll();
document.querySelector('[data-tippy-root]').remove();
});
}
DOMChange('[data-tippy-root] .tippy-box', TippyCloseButton);
} else {
tippy('.tip9336', {
content: GetContent,
width: GetWidth,
maxWidth: 'none',
theme: 'light',
allowHTML: true,
interactive: true,
});
}
});Source: atomiks/tippyjs