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

当鼠标滑过超链接的那一刻,我们都能想象出一个熟悉的白色提示框从鼠标指针所在的位置淡入。那是 ToolTip 提示框。HTML 中我们能通过简单的属性设置获得 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
}

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

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

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