html - 仅使用 CSS3 过渡制作丰富的工具提示（或至少，大部分）

Question

我不是 CSS 专业人士，但我正在努力学习。

我有这个小沙箱：

它基本上是一堆带有一些额外细节的图标，一旦你将鼠标悬停在图标上就会显示出来。

我一直在尝试使用 CSS 来完成这项工作，但到目前为止我的行为不稳定。代码在这里

我想知道我是否可以以某种方式模仿一个丰富的工具提示，以便在图标悬停时打开它，而不改变其他图标的位置。

任何创意，包括基本设计的改变，都将被欣然接受。

我的目标是使用 CSS3 过渡来实现这一点，因此理想的情况是最少甚至没有 JavaScript。

谢谢！

Answer 1

也许你可以使用hint.css，它是一个纯css工具提示

http://kushagragour.in/lab/hint/

Answer 2

我认为您需要教程来查看创建 CSS3 工具提示，主要代码是

<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>

.tooltip
{
 display: inline;
 position: relative;
}
.tooltip:hover:after
{
 background: #333;
 background: rgba(0,0,0,.8);
 border-radius: 5px;
 bottom: 26px;
 color: #fff;
 content: attr(title);
 left: 20%;
 padding: 5px 15px;
 position: absolute;
 z-index: 98;
 width: 220px;
}

.tooltip:hover:before
{
 border: solid;
 border-color: #333 transparent;
 border-width: 6px 6px 0 6px;
 bottom: 20px;
 content: "";
 left: 50%;
 position: absolute;
 z-index: 99;
}