mailto: 不在 UncontrolledTooltip 上工作答案

【问题标题】：mailto: is not working on UncontrolledTooltipmailto: 不在 UncontrolledTooltip 上工作
【发布时间】：2021-10-19 13:57:50
【问题描述】：

我尝试在悬停部分创建一个可点击的外部邮件链接。当用户将鼠标悬停在 some text 上时，会出现工具提示并且用户单击 some@example.com，但邮件应用程序未显示。

同样的代码在它之外也能工作，我不知道为什么。

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}}>
                Congratulations 
                <a href="mailto:some@example.com" className="text-signin ps-2">
                  some@example.com
                </a>
              </UncontrolledTooltip>

【问题讨论】：

标签： javascript html reactjs email

【解决方案1】：

在工具提示中包含链接将不起作用，因为一旦您停止将鼠标悬停在原始文本上，工具提示就会消失。您可能想要一个 popover 代替，它不会那么容易消失。

【讨论】：

我以为是popover，但是不能用，因为这段代码用在其他部分，而且有点击事件，我设置了2s不自动消失的时间。仍然不确定我能做些什么作为解决方案

【解决方案2】：

我解决如下

<UncontrolledTooltip placement="right-start" target="superTip" delay={{hide : 2000}} onClick={e=>e.stopPropagation()}>
                Congratulations 
                <a href="mailto:some@example.com" className="text-signin ps-2">
                  some@example.com
                </a>
              </UncontrolledTooltip>

【讨论】：