mailto:不使用UncontrolledTooltip

Question

我试图在悬停部分创建一个可点击的外部邮件链接。当用户将鼠标悬停在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>

Answer 1

在工具提示中拥有链接将无法工作，因为一旦停止在原始文本上悬停，工具提示就会消失。您可能想要一个波波夫，它不会那么容易消失。

Answer 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>