我尝试在悬停部分创建一个可点击的外部邮件链接。当用户将鼠标悬停在上时,一些文本,工具提示出现,用户点击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 <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>
在工具提示中放置链接是行不通的,因为一旦你停止将鼠标悬停在原始文本上,工具提示就会消失。你可能想要一个弹出窗口,它不会那么容易消失。
我解决了如下问题
<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>