在 HTML 超链接上添加可交互的 ToolTip

当鼠标滑过超链接的那一刻，我们都能想象出一个熟悉的白色提示框从鼠标指针所在的位置淡入。那是 ToolTip 提示框。HTML 中我们能通过简单的属性设置获得 ToolTip，但如果希望 ToolTip 是能交互的，那么就阅读本文吧！

先来看看 HTML 原生自带的 ToolTip：

代码非常简单：

  
<a title="你看到了什么？对，这就是原生自带的 ToolTip！" href="#">请将鼠标划至这里</a>

可交互的 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
}

本博客底部的版权信息中使用到了这种交互式 ToolTip。

本文会经常更新，请阅读原文： https://blog.walterlv.com/post/add-tooltip-for-html-a.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名吕毅（包含链接： https://blog.walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 ([email protected]) 。

在 HTML 超链接上添加可交互的 ToolTip

原生 ToolTip

可交互 ToolTip