纯CSS实现Tooltip

最新推荐文章于 2025-05-17 11:42:05 发布

藏红

最新推荐文章于 2025-05-17 11:42:05 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.youkuaiyun.com/ch717828/article/details/52217853

css 同时被 2 个专栏收录

8 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

本文介绍了如何利用CSS解决默认Tooltip显示延迟的问题，通过CSS实现自定义风格的Tooltip。主要关注在鼠标悬停时显示Tooltip内容，并能进行样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在编写HTML时，使用a标签的title属性浏览器会默认地实现Tooltip的功能。

    <a href="" title="Example of Tooltip">Tooltip</a>

该代码的效果： Tooltip

这样的实现存在两个问题：

title里的内容显示有延迟（不同的浏览器延迟时间不同）
title的内容无法风格化（确切的说，要自定义风格也是可以的，使用css和js）

我主要是为了解决第一个问题才选择使用纯CSS来实现Tooltip效果。

<a href="#" >鼠标悬浮显示tooltip<span class="black">这里是tooltip的内容</span></a>

css要做的是两件事

默认a标签下的span隐藏，鼠标悬浮在a上时让span显示
给span添加一个自定义的风格化class

a span{ 
  display:none;
  color:#fff;
  background:rgba(51,51,51,0.75);
  border-radius:1px;
  -moz-border-radius:1px;
  -webkit-border-radius:1px;
  text-align:center;
  position: absolute;
  z-index:10;
  padding:5px;
  overflow: visible;
}
a { display: inline-block;}
a:hover span{ display:block; }

span.black{
  background:rgba(0,0,0, 0.75);
  border:1px solid #1E5799;
}