search

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.92k stars 520 forks source link

How to close Tippy.js popover without navigating to another page #891

Closed pbougie closed 3 years ago

pbougie commented 3 years ago

When I click outside a Tippy.js popover to close it, it currently closes as expected but if a hyperlink exists where I click, it closes the popover then navigates to another page. The problem is the hyperlinks are big blocks that take up most of the screen (especially on mobile). Is there a way to close the popover but stop any other action from happening? If a popover is open, clicking anywhere else on the viewport should close the popover but not have any other unintended consequences. Shouldn't this be default behavior? Thanks.

KubaJastrz commented 3 years ago

I don't think should be the default behavior, since usually the tooltips cover small viewport area and are used in certain context, so it wouldn't make sense to block all other interactive elements on the page when you open one.

For example: click on the profile icon in the top right on GitHub. Would it be coool for you to disable everything until you close it? I think it'd be slightly annoying.

What you are trying to describe better fits a modal from an a11y perspective in my opinion.

But if you really want to implement this, I've crafted a simple example using an invisible layer that is rendered right below the tooltip but above the page content and it stays open until you click on it. Check it out: https://codepen.io/hawking/pen/ZEpdwjN

pbougie commented 3 years ago

Finally got around to implementing this. It worked very well. Thank you.