html - 关闭 Tippy Tooltip 会触发下方的链接

Question

如果一个 Tippy 工具提示恰好显示在链接上，那么单击工具提示也会意外触发底层链接。

tippy('#myButton', {
  content: 'Click this tooltip to close it',
  trigger: 'click'
});

<main>
  Clicking on the tooltip to close it navigates to the link.
  <br><br><a href=foo.html>This is the link that will be triggered</a>
  <br><br><button id="myButton">Click me to see tooltip</button>
</main>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

（如果您更喜欢https://codepen.io/mpoo/pen/LYLGVBP?editors=1000，也可以作为笔使用）

我希望有一个 Tippy Prop 可以避免这种行为，但似乎没有。

如何防止锚触发？

Answer 1

我们可以通过设置暂时禁用链接pointer-event: none

我们可以使用onShowandonHide属性来做到这一点：

1. onShow<a>:禁用所有
2. onHide<a>:启用所有

^{-->所有道具文档}

<main>
  Clicking on the tooltip to close it navigates to the link.
  
  <br><br><a href=foo.html>This is the link that will be triggered</a>
  <br><br><button id="myButton">Click me to see tooltip</button>
</main>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<script>
    tippy('#myButton', {
        content: 'Click this tooltip to close it',
        trigger: 'click',
        onShow: () => toggleLinks('none'),
        onHide: () => toggleLinks('auto')
    });
  
    const toggleLinks = (value) => {
        let links = document.getElementsByTagName('a'); // All <a> on page
     // let links = document.querySelectorAll('main a'); // See comment: All <a> as child of <main>
        for (let i = 0; i < links.length; i++) {
            links[i].style.pointerEvents = value;
        }
    };
</script>