动态生成的HTML按钮偶发无法点击且Tooltip失效的问题求助（附临时方案及代码）

各位好，我遇到了一个特别诡异的DOM交互问题，想请大家帮忙排查下：

我用动态渲染的表格行里，内嵌的按钮偶尔会出现无法点击的情况，关联的Tooltip也完全不显示。更奇怪的是，如果页面生成了2行动态内容，第二行的按钮完全正常（能点击+Tooltip正常触发），但第一行的按钮既点不动，Tooltip也没反应。我自己对DOM的细节理解还很粗浅，实在摸不清到底哪里出问题了。

偶尔也会有“反常时刻”——比如我右键点击页面其他区域、随意移动下鼠标之后，第一行的按钮又突然恢复正常了…

我用了Tailwind CSS来做样式，现在把相关的Jinja2渲染模板代码贴出来：

<td>
  <div class="m-2 justify-items-center" data-tooltip-target="tooltip-form-data-softdelete-button{{ e.id }}">
    <form action={{ url_for('expire_event', id=e.id )}} method="get" onsubmit="return MCFeventSoftKillEvent();">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
      <button type="submit" class="p-2" style="z-index:1000">
        <a>{% include 'softTrash.j2' %}</a>
      </button>
    </form>
  </div>
  <div id="tooltip-form-data-softdelete-button{{ e.id }}" role="tooltip" placement="bottom" class="absolute z-10 inline-block border border-1 w-60 px-3 py-2 text-m font-light text-black transition-opacity opacity-0 duration-300 bg-white rounded-lg shadow-xl tooltip">
    <span class="italic font-medium">Expires</span> event and <span class="italic font-medium">kills</span> data in related entities containing this <span class="italic font-medium"> specific event </span>
  </div>
</td>

临时解决进展（Edit）： #

我试着把Tooltip相关的代码完全删掉之后，所有按钮居然都能正常点击了！看来是Tooltip的实现影响了按钮的交互——我本来以为直接抄Flowbite的Tooltip代码就能无缝使用，没想到踩了这个坑。

现在我暂时的妥协方案是：把Tooltip移到列标题上用，虽然这个方案很“菜鸟”，但至少先保证核心功能能用…还是想问问有没有办法同时保留按钮上的Tooltip和正常点击功能呀？

内容来源于stack exchange