我不是CSS的专家,但我正在努力学习。
我有这个小沙箱:
它基本上是一堆图标,一旦您将鼠标悬停在图标上,就会显示一些额外的细节。
我一直在玩CSS尝试使这项工作,但到目前为止我的行为不稳定。 Code is here
我想知道我是否能够以某种方式模仿丰富的工具提示,以便在图标悬停时打开,而不会更改其他图标的位置。
任何有创意的想法,包括基本设计的改变,都会很乐意接受。
我的目标是使用CSS3 Transitions实现这一点,所以最小化到没有JavaScript是理想的。
谢谢!
答案 0 :(得分:2)
也许你可以使用hint.css,它是一个纯粹的css工具提示
答案 1 :(得分:0)
我认为您需要教程才能查看Create CSS3 Tooltip,主要代码是
<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;
}