Reactstrap的UncontrolledTooltip组件内mailto链接点击无响应问题

根因 #

Reactstrap 内置的 UncontrolledTooltip 组件默认不会开放内部内容的交互权限，同时默认规则下仅当鼠标停留在触发元素（代码里的Badge）上时才会保持显示，鼠标向 tooltip 移动时会触发离开逻辑，即使设置了隐藏延迟，内部元素的点击事件也会被默认拦截，所以mailto链接无法正常唤起邮件应用。

修复步骤 #

给 UncontrolledTooltip 组件添加 interactive 属性即可，该属性会开启tooltip内部内容的交互能力，同时支持鼠标悬停在tooltip上时暂停隐藏倒计时，保证用户可以正常点击内部链接。

修改后的代码如下：

import {
  Badge,
  UncontrolledTooltip,
} from "reactstrap"

<Badge
  pill
  className="badge-soft-success me-1 text-uppercase font-size-12"
  id="superTip"
>
  Some Text&nbsp;<i className="mdi mdi-alert-circle-outline"></i>
</Badge>
<UncontrolledTooltip 
  placement="right-start" 
  target="superTip" 
  delay={{hide : 2000}}
  interactive // 新增这一行即可
>
  Congratulations 
  <a href="mailto:some@example.com" className="text-signin ps-2">
    some@example.com
  </a>
</UncontrolledTooltip>

补充说明 #

如果需要更长的交互窗口，可以调整 delay.hide 的数值，或者修改 trigger 属性为 ['hover', 'focus', 'click'] 支持点击触发固定显示，按需调整即可。

内容的提问来源于stack exchange，提问作者seagulls0125