在 HTML 超链接上添加可交互的 ToolTip
当鼠标滑过超链接的那一刻，我们都能想象出一个熟悉的白色提示框从鼠标指针所在的位置淡入。那是 ToolTip 提示框。HTML 中我们能通过简单的属性设置获得 ToolTip，但如果希望 ToolTip 是能交互的，那么就阅读本文吧！
本文内容
- 原生 ToolTip
- 可交互 ToolTip
原生 ToolTip
先来看看 HTML 原生自带的 ToolTip：
请将鼠标划至这里
代码非常简单：
<a title="你看到了什么？对，这就是原生自带的 ToolTip！" href="#">请将鼠标划至这里</a>
可交互 ToolTip
可交互的 ToolTip 就没那么幸运了，没有自带。于是，我们可考虑通过自己拼接的 html 容器来实现。效果像这样：
请将鼠标划至这里 这是 内部的链接哦这是靠一组 html 容器和一些配套的 css 来实现的。
<span class="tooltip">
<span><a href="https://walterlv.github.io">请将鼠标划至这里</a></span>
<span class="tooltip-text">这是<a href="https://walterlv.github.io">内部的链接哦</a></span>
</span>
.tooltip .tooltip-text
{
visibility: hidden;
width: 14rem;
margin-left: -7rem;
bottom: 100%;
left: 50%;
background: #eee;
border-radius: 0.5rem;
text-align: center;
padding: 2px 0;
position: absolute;
z-index: 1
}
.tooltip:hover .tooltip-text
{
visibility: visible
}
本博客（https://blog.walterlv.com）底部的版权信息中使用到了这种交互式 ToolTip。
我的博客会首发于 https://blog.walterlv.com/，而 CSDN 会从其中精选发布，但是一旦发布了就很少更新。
如果在博客看到有任何不懂的内容，欢迎交流。我搭建了 dotnet 职业技术学院 欢迎大家加入。
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名吕毅（包含链接：https://walterlv.blog.csdn.net/），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。