Question

我有以下图标，主要用于我的大多数asp.net mvc网页： -

<i class=" icon icon-blue icon-star-on "></i>

此图标的相关CSS类是： -

 .active .icon32.icon-star-on,.icon32.icon-star-on,.icon32.icon-star-on:hover {background-position : -448px -96px ;}
 .icon.icon-blue,.icons-blue .icon {background-image : url('../img/opa-icons-blue16.png') ;}

但是我需要为图标添加一个tootip，以便在使用时将鼠标移到图标上以显示工具提示。那么有没有办法在我的CSS中定义工具提示，这样我就不必在每个屏幕上手动添加工具提示？感谢

Answer 1

是的，使用:after：

.icon:hover:after {
    content: "Your tooltip";
    display: block;
    position: relative;
    top: -16px;
    right: -16px;
    width: 100px;
    background: lightblue;
}

同时检查demo。

请注意，所有.icon个类都获得相同的工具提示。这是纯CSS解决方案。如果你希望它们对每个图标都不同，你可以使用不同的类，或者使用jQuery。

Answer 2

将此代码添加到您的css：

.tooltip {
    display: inline;
    position: relative;
}
.tooltip:hover {
    text-decoration: none;
}
.tooltip:hover:after{
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 18px;
    color: #fff;
    content: attr(title);
    display: block;
    left: 50%;
    padding: 5px 15px;
    position: absolute;
    white-space: nowrap;
    z-index: 98;
}
.tooltip:hover:before{
    border: solid;
    border-color: #111 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 12px;
    content: "";
    display: block;
    left: 75%;
    position: absolute;
    z-index: 99;
}

为图标title="Tooltip text"添加标题，并将tooltip类添加到图标中。

来源：http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY

Answer 3

添加包含元素文本的属性，并将其用于悬停。我已经展示了使用锚标记。

HTML

<a href="#" title="you have hovered">Hover here</a>

CSS

.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;
}

'http://jsfiddle.net/Kxnqx/'

如何为我的CSS文件中的图标添加工具提示

3 个答案: